:root{--bg-primary: #121212;--bg-secondary: #141414;--bg-tertiary: #1a1a1a;--text-primary: #ffffff;--text-secondary: #e0e0e0;--text-muted: #a0a0a0;--accent-blue: #569cd6;--accent-green: #6a9955;--accent-red: #f14c4c;--accent-yellow: #dcdcaa;--accent-purple: #c586c0;--accent-cyan: #4ec9b0;--accent-orange: #ce9178;--border-color: #2a2a2a;--shadow: 0 2px 4px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}.skip-link{position:absolute;top:-40px;left:0;background:var(--accent-blue);color:var(--bg-primary);padding:8px 16px;z-index:10000;text-decoration:none;font-weight:600;border-radius:0 0 8px}.skip-link:focus{top:0}body{font-family:JetBrains Mono,SF Mono,Fira Code,Consolas,monospace;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;padding:12px;line-height:1.4}#app{max-width:1500px;margin:0 auto}.header{text-align:center;margin-bottom:12px}.header h1{font-size:1.5rem;font-weight:700;color:var(--accent-blue);margin-bottom:4px;letter-spacing:-.5px}.header p{color:var(--text-muted);font-size:.8rem}.about-link{color:var(--accent-blue);text-decoration:none;margin-left:8px;opacity:.8;transition:opacity .15s ease}.about-link:hover{opacity:1;text-decoration:underline}.main-grid{display:grid;grid-template-columns:1fr 300px;gap:12px}.left-column,.sidebar{display:flex;flex-direction:column;gap:10px}.panel{background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow)}.panel-header{background:var(--bg-tertiary);padding:8px 12px;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}.panel-content{padding:10px}.editor-panel{display:flex;flex-direction:column}.editor-container{height:200px;overflow:hidden}.editor-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:85vh;max-width:1200px;z-index:1000;border-radius:12px;box-shadow:0 25px 80px #000c;border:1px solid var(--accent-blue);background:var(--bg-secondary)}.editor-container.expanded .cm-editor{font-size:1rem}.editor-close-btn{display:none;position:absolute;top:12px;right:12px;z-index:10;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);width:36px;height:36px;border-radius:8px;font-size:1.2rem;cursor:pointer;transition:all .15s ease}.editor-close-btn:hover{background:var(--accent-red);border-color:var(--accent-red);color:#fff}.editor-container.expanded .editor-close-btn{display:block}.editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;z-index:999;display:none}.editor-overlay.active{display:block}.editor-container .cm-editor{height:100%}.expand-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;padding:6px 12px;font-size:1rem;border-radius:6px;transition:all .15s ease}.expand-btn:hover{background:var(--accent-blue);color:var(--bg-primary);border-color:var(--accent-blue)}.editor-container.expanded+.controls .expand-btn,.expand-btn.active{background:var(--accent-blue);color:var(--bg-primary);border-color:var(--accent-blue)}.line-count{font-weight:400;color:var(--text-muted);font-size:.75rem}.header-controls{display:flex;align-items:center;gap:12px}.example-dropdown{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:4px;padding:4px 8px;font-family:inherit;font-size:.75rem;cursor:pointer;outline:none;transition:all .15s ease}.example-dropdown:hover{border-color:var(--accent-blue)}.example-dropdown:focus{border-color:var(--accent-blue);box-shadow:0 0 0 2px #7aa2f733}.example-dropdown option{background:var(--bg-secondary);color:var(--text-primary)}.example-dropdown optgroup{background:var(--bg-primary);color:var(--text-muted);font-weight:600}.controls{display:flex;gap:8px;padding:12px 16px;background:var(--bg-tertiary);border-top:1px solid var(--border-color);flex-wrap:wrap;align-items:center}.btn{padding:8px 14px;border:none;border-radius:6px;font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:6px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--accent-blue);color:var(--bg-primary)}.btn-primary:hover{background:#89b4fa;box-shadow:0 2px 8px #7aa2f766}.btn-success{background:var(--accent-green);color:var(--bg-primary)}.btn-success:hover{background:#a6da95;box-shadow:0 2px 8px #9ece6a66}.btn-warning{background:var(--accent-yellow);color:var(--bg-primary)}.btn-warning:hover{background:#f5d0a9;box-shadow:0 2px 8px #e0af6866}.btn-danger{background:var(--accent-red);color:var(--bg-primary)}.btn-danger:hover{background:#ff99a8;box-shadow:0 2px 8px #f7768e66}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--border-color)}.btn-micro{background:var(--accent-purple);color:var(--bg-primary)}.btn-micro:hover{background:#c4a7ff;box-shadow:0 2px 8px #bb9af766}.btn-cyan{background:var(--accent-cyan);color:var(--bg-primary)}.btn-cyan:hover{background:#9dd8ff;box-shadow:0 2px 8px #7dcfff66}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}.speed-control{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--text-muted);font-size:.8rem}.speed-control input[type=range]{width:100px;accent-color:var(--accent-blue);cursor:pointer}.console{background:var(--bg-primary);border-radius:6px;padding:8px;font-size:.75rem;min-height:60px;max-height:80px;overflow-y:auto;border:1px solid var(--border-color)}.console-line{padding:3px 0;color:var(--text-secondary)}.console-line.error{color:var(--accent-red)}.console-line.success{color:var(--accent-green)}.console-line.info{color:var(--accent-blue)}.registers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.register{background:var(--bg-tertiary);border-radius:6px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;transition:all .2s ease}.register.changed{background:var(--accent-blue);box-shadow:0 0 12px #7aa2f780}.register.changed .register-name,.register.changed .register-value{color:var(--bg-primary)}.register-name{font-weight:600;color:var(--accent-purple)}.register-value{color:var(--accent-cyan);font-weight:500}.current-instruction-wrapper{margin-bottom:14px}.current-instruction-label{font-size:.7rem;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.current-instruction{background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));color:var(--bg-primary);padding:10px 14px;border-radius:8px;font-size:.85rem;font-weight:600}.special-registers{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-color)}.special-register{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(59,66,97,.5);font-size:.8rem}.special-register:last-child{border-bottom:none}.special-register-name{color:var(--text-muted)}.special-register-value{color:var(--accent-yellow);font-weight:600}.flags-container{display:flex;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-color)}.flag{display:flex;align-items:center;gap:8px}.flag-indicator{width:12px;height:12px;border-radius:50%;background:var(--bg-tertiary);border:2px solid var(--text-muted);transition:all .2s ease}.flag-indicator.active{background:var(--accent-green);border-color:var(--accent-green);box-shadow:0 0 10px var(--accent-green)}.flag-name{font-size:.75rem;color:var(--text-muted)}.memory-range{font-weight:400;color:var(--text-muted);font-size:.7rem}.memory-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;font-size:.7rem;max-height:180px;overflow-y:auto}.memory-cell{background:var(--bg-tertiary);padding:6px 4px;text-align:center;border-radius:4px;color:var(--text-muted);transition:all .2s ease;font-weight:500}.memory-cell.nonzero{color:var(--accent-cyan);background:#7dcfff1a}.instruction-ref{font-size:.75rem;max-height:200px;overflow-y:auto}.instruction-item{display:grid;grid-template-columns:95px 1fr;gap:8px;padding:6px 0;border-bottom:1px solid rgba(59,66,97,.5)}.instruction-item:last-child{border-bottom:none}.instruction-name{color:var(--accent-green);font-weight:500}.instruction-desc{color:var(--text-muted)}.status-bar{margin-top:10px;display:flex;justify-content:space-between;padding:8px 14px;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color);font-size:.75rem}.status-item{display:flex;align-items:center;gap:10px}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--text-muted);transition:all .2s ease}.status-dot.running{background:var(--accent-green);box-shadow:0 0 10px var(--accent-green);animation:pulse 1s ease-in-out infinite}.status-dot.paused{background:var(--accent-yellow);box-shadow:0 0 8px var(--accent-yellow)}.status-dot.halted{background:var(--accent-red);box-shadow:0 0 8px var(--accent-red)}.status-item.copyright{margin-left:auto;color:var(--text-muted);font-size:.7rem}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.9)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-color)}@media(max-width:1200px){.main-grid{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media(max-width:768px){body{padding:12px}.header h1{font-size:1.5rem}.controls{flex-direction:column;align-items:stretch}.speed-control{margin-left:0;margin-top:8px}}.cpu-arch-panel .panel-content{padding:12px}.cycle-indicator{font-size:.7rem;padding:4px 10px;border-radius:12px;background:var(--bg-primary);color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;transition:all .3s ease}.cycle-indicator.fetch{background:var(--accent-blue);color:var(--bg-primary);box-shadow:0 0 12px #7aa2f780}.cycle-indicator.decode{background:var(--accent-yellow);color:var(--bg-primary);box-shadow:0 0 12px #e0af6880}.cycle-indicator.execute{background:var(--accent-green);color:var(--bg-primary);box-shadow:0 0 12px #9ece6a80}.cycle-indicator.writeback{background:var(--accent-purple);color:var(--bg-primary);box-shadow:0 0 12px #bb9af780}.pipeline-stages{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:12px;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color)}.pipeline-stage{flex:1;padding:12px 8px;text-align:center;border-radius:6px;background:var(--bg-tertiary);transition:all .3s ease;border:2px solid transparent}.pipeline-stage.active{transform:scale(1.05);border-color:var(--accent-blue);box-shadow:0 4px 20px #7aa2f74d}.pipeline-stage[data-stage=fetch].active{background:var(--accent-blue);color:var(--bg-primary)}.pipeline-stage[data-stage=decode].active{background:var(--accent-yellow);color:var(--bg-primary)}.pipeline-stage[data-stage=execute].active{background:var(--accent-green);color:var(--bg-primary)}.pipeline-stage[data-stage=writeback].active{background:var(--accent-purple);color:var(--bg-primary)}.stage-label{font-weight:700;font-size:.75rem;letter-spacing:.5px;margin-bottom:4px}.stage-description{font-size:.65rem;color:var(--text-muted);opacity:.8}.pipeline-stage.active .stage-description{color:inherit;opacity:.9}.pipeline-arrow{color:var(--text-muted);font-size:1.2rem;padding:0 4px}.cpu-internals{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center;margin-bottom:16px}.cpu-component{background:var(--bg-tertiary);border-radius:8px;overflow:hidden;border:1px solid var(--border-color)}.component-header{background:var(--bg-primary);padding:8px 12px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-cyan);text-align:center}.component-content{padding:10px}.control-unit{min-width:140px}.cu-field{display:flex;justify-content:space-between;padding:4px 0;font-size:.75rem}.field-label{color:var(--text-muted)}.field-value{color:var(--accent-yellow);font-weight:500;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alu{min-width:180px}.alu-inputs{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.alu-input{text-align:center;font-size:.7rem}.input-label{display:block;color:var(--text-muted);margin-bottom:2px}.input-value{color:var(--accent-cyan);font-weight:500;font-size:.75rem}.alu-op{font-size:1.2rem;font-weight:700;color:var(--accent-green);padding:4px 12px;background:var(--bg-primary);border-radius:4px}.alu-output{text-align:center;padding-top:8px;border-top:1px solid var(--border-color);font-size:.75rem}.output-label{color:var(--text-muted);margin-right:8px}.output-value{color:var(--accent-green);font-weight:600}.memory-interface{min-width:140px}.mem-field{display:flex;justify-content:space-between;padding:4px 0;font-size:.75rem}.data-bus{width:40px;height:24px;background:var(--bg-primary);border:2px dashed var(--border-color);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;transition:all .3s ease}.data-bus.active{border-color:var(--accent-cyan);border-style:solid;background:#7dcfff1a;box-shadow:0 0 12px #7dcfff4d}.bus-data{font-size:.6rem;font-weight:600;color:var(--accent-cyan)}.flash{animation:flashValue .3s ease}@keyframes flashValue{0%{color:var(--accent-green);transform:scale(1.2)}to{transform:scale(1)}}.micro-op-display{background:var(--bg-primary);border-radius:8px;padding:12px;margin-bottom:12px;border:1px solid var(--border-color)}.micro-op-header{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:10px}.micro-op-idle{color:var(--text-muted);font-style:italic;font-size:.8rem}.micro-op-active{animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.micro-op-stage{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.micro-op-stage.fetch{background:var(--accent-blue);color:var(--bg-primary)}.micro-op-stage.decode{background:var(--accent-yellow);color:var(--bg-primary)}.micro-op-stage.execute{background:var(--accent-green);color:var(--bg-primary)}.micro-op-stage.writeback{background:var(--accent-purple);color:var(--bg-primary)}.micro-op-desc{font-size:.85rem;color:var(--text-primary);margin-bottom:6px}.micro-op-flow{font-size:.75rem;color:var(--text-secondary);margin-bottom:4px}.flow-from{color:var(--accent-cyan)}.flow-to{color:var(--accent-green)}.micro-op-value{font-size:.8rem;color:var(--accent-orange)}.data-flow-log{background:var(--bg-primary);border-radius:8px;padding:10px;border:1px solid var(--border-color);max-height:150px;overflow-y:auto}.flow-log-header{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px}.flow-log-content{display:flex;flex-direction:column;gap:4px}.flow-entry{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--bg-secondary);border-radius:4px;font-size:.7rem;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.flow-stage{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0}.flow-entry.fetch .flow-stage{background:var(--accent-blue);color:var(--bg-primary)}.flow-entry.decode .flow-stage{background:var(--accent-yellow);color:var(--bg-primary)}.flow-entry.execute .flow-stage{background:var(--accent-green);color:var(--bg-primary)}.flow-entry.writeback .flow-stage{background:var(--accent-purple);color:var(--bg-primary)}.flow-desc{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gpu-panel .panel-content{padding:12px}.gpu-status{font-size:.7rem;padding:4px 10px;border-radius:12px;background:var(--bg-primary);color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;transition:all .3s ease}.gpu-status.active{background:var(--accent-green);color:var(--bg-primary);box-shadow:0 0 12px #9ece6a80;animation:pulse .8s ease-in-out infinite}.gpu-architecture{display:flex;flex-direction:column;gap:12px}.gpu-section-header{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.vram-range{font-weight:400;color:var(--accent-cyan);font-size:.65rem}.gpu-cores-section{background:var(--bg-primary);border-radius:8px;padding:12px;border:1px solid var(--border-color)}.gpu-cores-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gpu-core{background:var(--bg-tertiary);border-radius:6px;overflow:hidden;border:2px solid transparent;transition:all .3s ease}.gpu-core.active{border-color:var(--accent-green);box-shadow:0 0 12px #9ece6a4d;background:var(--accent-green)}.gpu-core.active .core-header{background:transparent;color:var(--bg-primary)}.gpu-core.active .core-io span{color:var(--bg-primary)}.core-header{background:var(--bg-primary);padding:4px 8px;font-size:.65rem;font-weight:600;text-align:center;color:var(--accent-cyan)}.core-content{padding:6px}.core-io{display:flex;justify-content:space-between;align-items:center;font-size:.7rem}.core-input{color:var(--accent-blue);font-weight:500}.core-op{color:var(--accent-green);font-weight:700;font-size:.9rem}.core-output{color:var(--accent-yellow);font-weight:500}.gpu-bus-section{display:flex;justify-content:center}.gpu-bus{background:var(--bg-primary);border:2px dashed var(--border-color);border-radius:8px;padding:8px 20px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .3s ease;min-width:300px}.gpu-bus.active{border-color:var(--accent-cyan);border-style:solid;background:#7dcfff1a;box-shadow:0 0 16px #7dcfff66}.gpu-bus .bus-label{font-size:.7rem;color:var(--text-muted);font-weight:500}.gpu-bus .bus-activity{font-size:.75rem;color:var(--accent-cyan);font-weight:500;min-height:1.2em}.vram-section{background:var(--bg-primary);border-radius:8px;padding:10px;border:1px solid var(--border-color)}.vram-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;font-size:.7rem}.vram-cell{background:var(--bg-tertiary);padding:6px 4px;text-align:center;border-radius:4px;color:var(--text-muted);transition:all .2s ease;font-weight:500}.vram-cell.nonzero{color:var(--accent-purple);background:#bb9af71a}.gpu-op-status{background:var(--bg-primary);border-radius:8px;padding:10px;border:1px solid var(--border-color)}.gpu-op-header{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px}.gpu-op-idle{color:var(--text-muted);font-style:italic;font-size:.8rem}.gpu-op-active{animation:fadeIn .2s ease}.gpu-op-name{font-size:1rem;font-weight:700;color:var(--accent-green);margin-bottom:8px}.gpu-op-details{display:flex;gap:16px;font-size:.75rem;color:var(--text-secondary);margin-bottom:10px}.gpu-op-details span{padding:4px 8px;background:var(--bg-secondary);border-radius:4px}.gpu-op-progress{display:flex;align-items:center;gap:10px;font-size:.75rem;color:var(--text-muted)}.progress-bar{flex:1;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--accent-green);border-radius:4px;transition:width .3s ease}