@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--nav-bg-light: rgba(255, 255, 255, .8);--nav-bg-dark: rgba(20, 20, 20, .8);--nav-border-light: rgba(255, 255, 255, .3);--nav-border-dark: rgba(255, 255, 255, .1);--text-active: #4F46E5;--text-inactive: #888}.mobile-bottom-nav{position:fixed;bottom:0;left:0;width:100%;height:70px;display:flex;justify-content:space-around;align-items:center;background-color:var(--nav-bg-light);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-top:1px solid var(--nav-border-light);z-index:1000;padding-bottom:env(safe-area-inset-bottom)}body.dark .mobile-bottom-nav{background-color:var(--nav-bg-dark);border-top:1px solid var(--nav-border-dark)}.nav-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;background:transparent;border:none;color:var(--text-inactive);-webkit-tap-highlight-color:transparent;transition:transform .1s ease}.nav-button:active{transform:scale(.9)}.nav-button.active{color:var(--text-active)}.nav-icon{font-size:20px;margin-bottom:2px}.nav-label{font-size:10px;font-weight:500}:root{--bg-color: #050505;--bg-glow-1: rgba(47, 129, 247, .08);--bg-glow-2: rgba(47, 129, 247, .03);--panel-bg: #0f1115;--glass-bg: rgba(22, 27, 34, .7);--viz-bg: #010409;--viz-block: #0f1115;--viz-line: rgba(255, 255, 255, .25);--viz-stage-inactive: #0f1115;--viz-stroke: #30363d;--border-color: rgba(255, 255, 255, .08);--text-primary: #f0f6fc;--text-secondary: #8b949e;--accent-color: #2f81f7;--accent-glow: rgba(47, 129, 247, .3);--success-color: #3fb950;--warning-color: #d29922;--danger-color: #f85149;--panel-radius: 12px;--font-sans: "Plus Jakarta Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}:root[data-theme=light]{--bg-color: #eef1f8;--bg-glow-1: rgba(99, 102, 241, .12);--bg-glow-2: rgba(14, 165, 233, .07);--panel-bg: #ffffff;--glass-bg: rgba(255, 255, 255, .88);--viz-bg: #f1f5fb;--viz-block: #dbe4f5;--viz-line: rgba(51, 65, 85, .5);--viz-stage-inactive: #c8d3e8;--viz-stroke: #4b5680;--border-color: rgba(99, 102, 241, .22);--text-primary: #0f172a;--text-secondary: #4b5680;--accent-color: #4f46e5;--accent-glow: rgba(79, 70, 229, .22);--success-color: #059669;--warning-color: #d97706;--danger-color: #e11d48;--panel-shadow: 0 1px 3px rgba(15,23,42,.07), 0 8px 24px rgba(15,23,42,.06);--panel-shadow-hover: 0 4px 6px rgba(15,23,42,.06), 0 16px 32px rgba(15,23,42,.1);--header-bg: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e3a5f 100%);--header-text: #f1f5f9;--header-border: rgba(255,255,255,.1)}:root[data-theme=light] body{background:linear-gradient(160deg,#e8ecf5,#eef1f8 40%,#e5eaf5);background-attachment:fixed}:root[data-theme=light] .panel{box-shadow:var(--panel-shadow);border-color:#6366f11a;background:#fff;transition:box-shadow .25s,border-color .25s}:root[data-theme=light] .panel:hover{box-shadow:var(--panel-shadow-hover);border-color:#4f46e52e}:root[data-theme=light] .header{background:var(--header-bg);border-radius:14px;padding:.85rem 1.5rem!important;border:1px solid var(--header-border);box-shadow:0 4px 24px #1e1b4b40}:root[data-theme=light] .header h1{-webkit-text-fill-color:#f1f5f9!important;color:#f1f5f9!important}:root[data-theme=light] .header .stat{color:#f1f5f9b3}:root[data-theme=light] .header .stat strong{color:#a5b4fc}:root[data-theme=light] .header .btn.btn-outline{color:#e0e7ff;border-color:#ffffff2e;background:#ffffff14}:root[data-theme=light] .header .btn.btn-outline:hover{background:#ffffff29;border-color:#ffffff4d}:root[data-theme=light] .header .btn-reset{background:#e11d4826;border-color:#e11d4859;color:#fb7185}:root[data-theme=light] .header .btn-step{background:#6366f126;border-color:#6366f159;color:#a5b4fc}:root[data-theme=light] .header .btn-play{background:#05966926;border-color:#05966959;color:#6ee7b7}:root[data-theme=light] .theme-label{color:#f1f5f9bf}:root[data-theme=light] .theme-toggle .btn-outline{color:#f1f5f9a6;border-color:#ffffff26;background:#ffffff0f}:root[data-theme=light] .theme-toggle .btn-outline.theme-active{background:#4f46e5;border-color:#6366f1;color:#fff;box-shadow:0 0 12px #4f46e566}:root[data-theme=light] .reg-item{background:#f1f5fd;border:1px solid rgba(99,102,241,.15)}:root[data-theme=light] .reg-item:hover{border-color:#4f46e547;background:#eaecfd}:root[data-theme=light] .reg-label{color:#94a3b8;font-size:.68rem}:root[data-theme=light] .reg-val{color:#3730a3;font-weight:700;font-size:.78rem}:root[data-theme=light] .flag{background:#eef1fa;border:1px solid #c5cfe8;color:#475569;font-weight:700}:root[data-theme=light] .flag.set{background:#4f46e5;border-color:#4f46e5;color:#fff;box-shadow:0 0 12px #4f46e559}:root[data-theme=light] .stage-card{background:#eef1fa;border:1px solid #c5cfe8}:root[data-theme=light] .stage-name{color:#475569}:root[data-theme=light] .stage-card .text-muted{color:#94a3b8!important}:root[data-theme=light] .stage-card.active{background:#4f46e512;border-color:#6366f1;box-shadow:0 4px 16px #4f46e51f}:root[data-theme=light] .stage-card.active .stage-name{color:#4f46e5}:root[data-theme=light] .signal-tag{background:#f8faff;border-color:#6366f11f;color:#4b5680}:root[data-theme=light] .signal-tag.active{background:#4f46e514;border-color:#6366f1;color:#4f46e5;box-shadow:0 0 10px #4f46e526}:root[data-theme=light] .code-editor{background:#f8faff;border-color:#6366f126;color:#1e293b}:root[data-theme=light] .code-editor:focus{border-color:#6366f1;box-shadow:0 0 0 4px #4f46e51f}:root[data-theme=light] .machine-code-table th{background:#f1f5fd}:root[data-theme=light] .bit-cond{color:#c0392b}:root[data-theme=light] .bit-op{color:#b7660a}:root[data-theme=light] .bit-reg{color:#1a5fb4}:root[data-theme=light] .bit-imm{color:#1a7a34}:root[data-theme=light] .mem-item{background:#f1f5fd;border:1px solid rgba(99,102,241,.1)}:root[data-theme=dark] .btn-outline.theme-active{border-color:var(--accent-color);color:#fff;background:var(--accent-color)}:root[data-theme=light] .btn-outline.theme-active{border-color:var(--accent-color);color:#fff;background:var(--accent-color)}*{box-sizing:border-box;-webkit-font-smoothing:antialiased}html{scroll-behavior:smooth}body{margin:0;background-color:var(--bg-color);background-image:radial-gradient(circle at 50% 0%,var(--bg-glow-1) 0%,transparent 50%),radial-gradient(circle at 0% 100%,var(--bg-glow-2) 0%,transparent 40%);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;overflow-y:auto;overflow-x:hidden;background-attachment:fixed}#root{min-height:100%}.container{display:flex;flex-direction:column;min-height:100vh;padding:1.25rem}.header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.25rem;background:linear-gradient(135deg,#0d1117,#161b22);border-bottom:1px solid rgba(255,255,255,.07);color:#f0f6fc;position:sticky;top:0;z-index:100}.header-brand{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.header-logo{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.header-stats{display:flex;align-items:center;gap:.35rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:.25rem .6rem}.hstat{font-size:.72rem;color:#ffffff80;font-family:var(--font-mono)}.hstat strong{color:#93c5fd;font-weight:600}.hstat-sep{color:#fff3;font-size:.75rem}.header-controls{display:flex;align-items:center;gap:.5rem;flex:1;justify-content:flex-end;min-width:0;overflow:hidden}.hgroup{display:flex;align-items:center;gap:.3rem}.hdivider{width:1px;height:20px;background:#ffffff14;flex-shrink:0}.hbtn{display:inline-flex;align-items:center;gap:.3rem;height:30px;padding:0 .65rem;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#ffffffbf;font-size:.72rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,color .15s}.hbtn:hover:not(:disabled){background:#ffffff1a;color:#fff;border-color:#fff3}.hbtn:disabled{opacity:.35;cursor:not-allowed}.hbtn-reset{background:#f851491f;border-color:#f851494d;color:#fca5a5}.hbtn-reset:hover:not(:disabled){background:#f8514938;border-color:#f8514980;color:#fca5a5}.hbtn-step{background:#2f81f71a;border-color:#2f81f740;color:#93c5fd}.hbtn-step:hover:not(:disabled){background:#2f81f733;border-color:#2f81f773;color:#bfdbfe}.hbtn-step:disabled{opacity:.3}.hbtn-play{background:#3fb95026;border-color:#3fb95059;color:#86efac;min-width:64px;justify-content:center}.hbtn-play:hover:not(:disabled){background:#3fb95040;border-color:#3fb9508c;color:#bbf7d0}.hbtn-play:disabled{opacity:.3}.hbtn-util{color:#fff9}.speed-pill{display:flex;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:7px;overflow:hidden;background:#ffffff0a}.speed-opt{height:30px;padding:0 .6rem;font-size:.7rem;font-weight:600;font-family:var(--font-sans);border:none;background:transparent;color:#ffffff73;cursor:pointer;transition:background .15s,color .15s;border-right:1px solid rgba(255,255,255,.07)}.speed-opt:last-child{border-right:none}.speed-opt:hover{background:#ffffff12;color:#fffc}.speed-opt.active{background:#2f81f733;color:#93c5fd}.theme-icon-toggle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#ffffffa6;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}.theme-icon-toggle:hover{background:#ffffff1a;color:#fff}.hbtn-avatar{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);background:transparent;cursor:pointer;padding:0;overflow:hidden;transition:border-color .15s}.hbtn-avatar:hover{border-color:#fff6}.hbtn-avatar-initials{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}.stat-group{display:flex;gap:1.5rem}.stat{font-family:var(--font-mono);font-size:.85rem}.stat strong{color:var(--accent-color)}.main-content{display:grid;grid-template-columns:410px 1fr 300px;gap:1.25rem;flex:1;min-height:0;margin-top:1.25rem}.panel{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:var(--panel-radius);padding:1.5rem;display:flex;flex-direction:column;box-shadow:0 8px 32px #0006;position:relative;overflow:hidden}h3{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-top:0;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}h3:after{content:"";flex:1;height:1px;background:var(--border-color)}.viz-panel{padding:0;background:var(--viz-bg)}.control-signals-panel{padding:1.25rem;border-top:1px solid var(--border-color);background:#ffffff05}.signals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.signal-tag{font-family:var(--font-mono);font-size:.7rem;padding:.4rem .6rem;background:#ffffff08;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);display:flex;justify-content:space-between}.signal-tag.active{background:#2f81f71a;border-color:var(--accent-color);color:var(--accent-color);box-shadow:0 0 10px var(--accent-glow)}.code-editor{flex:1;width:100%;background:var(--panel-bg);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-mono);padding:1rem;border-radius:8px;resize:none;font-size:.9rem;line-height:1.6;transition:border-color .2s,box-shadow .2s}.code-editor:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 4px var(--accent-glow)}.registers-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.reg-item{background:#ffffff08;padding:.35rem .6rem;border-radius:7px;display:flex;justify-content:space-between;align-items:center;border:1px solid transparent}.reg-label{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary)}.reg-val{font-family:var(--font-mono);font-size:.75rem;color:var(--accent-color);font-weight:500}.flags-bar{display:flex;gap:.4rem;margin-bottom:1rem}.flag{display:inline-flex;align-items:center;justify-content:center;width:36px;height:28px;background:#ffffff0a;border:1px solid var(--border-color);border-radius:6px;font-family:var(--font-mono);font-weight:700;font-size:.72rem;color:var(--text-secondary);position:relative;cursor:default;user-select:none}.flag.set{background:var(--accent-color);border-color:var(--accent-color);color:#fff;box-shadow:0 0 10px var(--accent-glow)}.controls-container{margin-top:auto;padding:1.5rem 0 0}.controls{padding:0;display:flex;gap:1rem;background:transparent;transform:translateY(-20px)}.btn{height:40px;padding:0 1.5rem;border-radius:8px;border:1px solid var(--border-color);background:#ffffff0d;color:var(--text-primary);font-weight:600;font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.btn:hover{background:#ffffff1a;border-color:var(--text-secondary)}.btn-primary{background:var(--accent-color);border:none}.btn-primary:hover{background:#478be6}.btn-play{background:#3fb9501a;border:1px solid rgba(63,185,80,.3);color:#3fb950}.btn-play:hover{background:#3fb95033;border-color:#3fb950;box-shadow:0 0 15px #3fb9504d}.btn-step{background:#2f81f71a;border:1px solid rgba(47,129,247,.3);color:#2f81f7}.btn-step:hover:not(:disabled){background:#2f81f733;border-color:#2f81f7;box-shadow:0 0 15px #2f81f74d}.btn-reset{background:#f851491a;border:1px solid rgba(248,81,73,.3);color:#f85149}.btn-reset:hover{background:#f8514933;border-color:#f85149;box-shadow:0 0 15px #f851494d}.btn-outline{padding:0 1rem;background:transparent;color:var(--text-secondary);font-size:.75rem}.header .btn.btn-outline{color:#f0f6fc;border-color:#ffffff2e;background:#ffffff0f}.header .btn.btn-outline:hover{background:#ffffff1f}.flow-active{stroke:var(--accent-color)!important;stroke-width:4!important;filter:drop-shadow(0 0 8px var(--accent-glow));opacity:1!important;transition:all .2s ease}.flow-inactive{stroke:var(--viz-line)!important;stroke-width:2.5!important;opacity:.75!important}.block-active{stroke:var(--accent-color)!important;stroke-width:2!important;filter:drop-shadow(0 0 8px var(--accent-glow))}.offline-warning{background:#d299221a;color:var(--warning-color);padding:.75rem 1.25rem;border-radius:8px;border:1px solid var(--warning-color);margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.offline-warning button{background:none;border:none;color:inherit;cursor:pointer;font-size:1.2rem}.memory-list{max-height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem}.mem-item{display:flex;justify-content:space-between;font-family:var(--font-mono);padding:.5rem .75rem;background:#ffffff08;border-radius:8px;font-size:.8rem}.mem-addr{color:var(--text-secondary)}.book-mode-panel{display:flex;flex-direction:column;gap:.6rem}.book-badge{border:1px solid var(--accent-color);border-radius:10px;padding:.75rem 1rem;background:#2f81f70f;display:flex;flex-direction:column;gap:.25rem}.book-badge-header{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.book-badge-title{font-size:.9rem;font-weight:600;color:var(--text-primary)}.book-badge-concept{font-size:.78rem;color:var(--text-secondary);line-height:1.4}.book-browse-toggle{display:flex;align-items:center;gap:.4rem;width:100%;padding:.55rem .85rem;background:#ffffff0a;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s;font-family:var(--font-sans)}.book-browse-toggle:hover{background:#ffffff12;color:var(--text-primary)}.book-browser{border:1px solid var(--border-color);border-radius:10px;overflow:hidden}.book-chapter-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-color);padding:.4rem .5rem;gap:.3rem;flex-wrap:wrap}.book-ch-tab{padding:.25rem .6rem;border-radius:6px;border:1px solid transparent;background:none;color:var(--text-secondary);font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s;font-family:var(--font-sans)}.book-ch-tab:hover{background:#ffffff0f;color:var(--text-primary)}.book-ch-tab.active{background:#2f81f71f;color:var(--accent-color);border-color:var(--accent-color)}.book-program-list{display:flex;flex-direction:column;max-height:280px;overflow-y:auto}.book-program-card{padding:.65rem .9rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s;border-left:3px solid transparent}.book-program-card:last-child{border-bottom:none}.book-program-card:hover{background:#ffffff0a}.book-program-card.active{border-left-width:3px}.book-card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}.book-card-ch{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.book-card-title{font-size:.82rem;font-weight:600;color:var(--text-primary)}.book-card-concept{font-size:.74rem;color:var(--text-secondary);line-height:1.35}:root[data-theme=light] .book-badge{background:#4f46e50d}:root[data-theme=light] .book-browse-toggle{background:#6366f10a;border-color:#6366f12e}:root[data-theme=light] .book-browse-toggle:hover{background:#6366f114}:root[data-theme=light] .book-browser{border-color:#6366f12e}:root[data-theme=light] .book-chapter-tabs{border-color:#6366f11f}:root[data-theme=light] .book-program-card{border-color:#6366f11a}:root[data-theme=light] .book-program-card:hover{background:#6366f10a}:root[data-theme=light] .book-ch-tab.active{background:#4f46e51a;color:var(--accent-color);border-color:var(--accent-color)}.stack-viewer{display:flex;flex-direction:column;gap:0;font-family:var(--font-mono);font-size:.78rem;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;max-height:240px;overflow-y:auto}.stack-boundary{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;background:#ffffff05;border-bottom:2px solid var(--border-color)}.stack-boundary-label{color:var(--text-secondary);font-size:.72rem;opacity:.7}.stack-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;border-bottom:1px solid var(--border-color);transition:background .15s}.stack-row:last-child{border-bottom:none}.stack-sp-row{background:#2f81f714}.stack-addr{color:var(--text-secondary);min-width:60px}.stack-val{color:var(--text-primary);flex:1}.stack-val-empty{color:var(--text-secondary);opacity:.5}.stack-sp-arrow{color:var(--accent-color);font-weight:600;font-size:.72rem;white-space:nowrap}.stack-empty{padding:.75rem;color:var(--text-secondary);font-size:.78rem;text-align:center;opacity:.6;font-family:var(--font-sans)}:root[data-theme=light] .stack-viewer{border-color:#6366f12e}:root[data-theme=light] .stack-sp-row{background:#4f46e512}:root[data-theme=light] .stack-row{border-color:#6366f11a}:root[data-theme=light] .stack-boundary{border-color:#6366f12e;background:#6366f10a}.json-output{margin-top:1.5rem;border-top:1px solid var(--border-color);padding-top:1.25rem}.json-viewer{background:var(--panel-bg);border-radius:8px;padding:1rem;max-height:200px;overflow-y:auto}.json-viewer pre{margin:0;font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary)}.pipeline-activity{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin-top:1.25rem}.stage-card{background:#ffffff05;border:1px solid var(--border-color);border-radius:8px;padding:.75rem;transition:all .3s ease}.stage-card.active{background:#2f81f70d;border-color:var(--accent-color);box-shadow:0 4px 12px var(--accent-glow)}.stage-name{font-size:.65rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;display:block}.stage-card.active .stage-name{color:var(--accent-color)}.stage-inst{font-family:var(--font-mono);font-size:.75rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.4rem;display:block}.stage-data{font-family:var(--font-mono);font-size:.7rem;color:var(--text-secondary);line-height:1.4}.stage-data strong{color:var(--accent-color)}.footer-controls{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:1rem!important;flex-wrap:nowrap!important}.controls-center{flex:1;display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:nowrap}.controls-right{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}.theme-toggle{display:flex;flex-direction:row;align-items:center;gap:.75rem}.theme-buttons{display:flex;flex-direction:row;gap:.5rem}.theme-label{color:#f0f6fc;font-weight:500}.arrow-inactive-marker{fill:var(--viz-line)}.arrow-active-marker{fill:var(--accent-color)}.mc-panel{margin-top:1.5rem;border-top:1px solid var(--border-color);padding-top:1.25rem}.mc-panel-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.mc-subtitle{font-size:.75rem;color:var(--text-secondary);margin:0}.btn-toggle{background:#ffffff08;color:var(--text-secondary);border:1px solid var(--border-color);padding:.25rem .75rem;font-size:.7rem;height:28px;border-radius:4px}.btn-toggle.active{background:#2f81f726;color:var(--accent-color);border-color:var(--accent-color)}.mc-legend{display:flex;gap:1rem;margin-bottom:1rem;font-size:.7rem;font-family:var(--font-sans)}.legend-item{display:flex;align-items:center;gap:.4rem}.legend-item:before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px}.legend-item.bit-cond:before{background:#f851494d;border:1px solid #f85149}.legend-item.bit-op:before{background:#d299224d;border:1px solid #d29922}.legend-item.bit-reg:before{background:#2f81f74d;border:1px solid #2f81f7}.legend-item.bit-imm:before{background:#3fb9504d;border:1px solid #3fb950}.machine-code-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.8rem;text-align:left;background:var(--panel-bg);border-radius:8px;overflow:hidden;border:1px solid var(--border-color)}.machine-code-table th,.machine-code-table td{padding:.6rem .75rem;border-bottom:1px solid var(--border-color)}.machine-code-table th{background:#ffffff05;color:var(--text-secondary);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-sans);border-bottom:1px solid var(--border-color)}.machine-code-table th span{font-family:var(--font-mono);font-size:.65rem;opacity:.6;text-transform:none}.machine-code-table td{white-space:nowrap}.mc-addr{color:var(--text-secondary)}.mc-hex{color:var(--text-primary);font-weight:600;letter-spacing:1px}.mc-asm{color:var(--text-primary)}.mc-bits{letter-spacing:2px;font-size:.75rem}.bit-cond{color:#f85149}.bit-op{color:#d29922}.bit-reg{color:#2f81f7}.bit-imm{color:#3fb950}.mc-row-fetch{background:#2f81f71a;box-shadow:inset 2px 0 #2f81f7}.mc-row-decode{background:#d2992214;box-shadow:inset 2px 0 #d29922}.mc-row-execute{background:#3fb95014;box-shadow:inset 2px 0 #3fb950}.stage-badge{display:inline-block;padding:.2rem .5rem;border-radius:4px;font-size:.65rem;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.05em}.stage-badge.fetch{background:#2f81f726;color:#2f81f7;border:1px solid rgba(47,129,247,.3)}.stage-badge.decode{background:#d2992226;color:#d29922;border:1px solid rgba(210,153,34,.3)}.stage-badge.exec{background:#3fb95026;color:#3fb950;border:1px solid rgba(63,185,80,.3)}.stage-badge.memory{background:#a371f726;color:#a371f7;border:1px solid rgba(163,113,247,.3)}.stage-badge.writeback{background:#f8514926;color:#f85149;border:1px solid rgba(248,81,73,.3)}.mc-row-memory{background:#a371f714;box-shadow:inset 2px 0 #a371f7}.mc-row-writeback{background:#f8514914;box-shadow:inset 2px 0 #f85149}.completion-banner{background:#3fb9501a;color:var(--success-color);padding:.75rem 1.25rem;border-radius:8px;border:1px solid var(--success-color);margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:500}.completion-banner button{background:#3fb95026;border:1px solid rgba(63,185,80,.4);color:var(--success-color);cursor:pointer;font-size:.8rem;font-weight:600;padding:.3rem .75rem;border-radius:6px}.machine-code-table td:last-child{white-space:nowrap;min-width:100px}.text-muted{color:var(--text-secondary);font-size:.8rem}:root[data-theme=light] .memory-list .text-muted{color:#94a3b8;background:#f1f5fd;border:1px dashed #c5cfe8;border-radius:8px;padding:.75rem;text-align:center;display:block}:root[data-theme=light] .microarch-container [style*=backgroundColor]{box-shadow:0 2px 8px #0f172a1f!important}:root[data-theme=light] .panel{border-color:#6366f12e}:root[data-theme=light] .control-signals-panel{background:#f8faff;border-top-color:#6366f126}@keyframes regFlash{0%{background:#2f81f74d;border-color:#2f81f799}to{background:transparent;border-color:transparent}}.reg-item.reg-changed{animation:regFlash 1.2s ease-out;border-radius:5px}.registers-grid.binary-mode{grid-template-columns:1fr}.registers-grid.binary-mode .reg-val{font-size:.6rem;letter-spacing:.03em}@keyframes flagFlash{0%{transform:scale(1.2);box-shadow:0 0 8px currentColor}to{transform:scale(1);box-shadow:none}}.flag.flag-changed{animation:flagFlash .8s ease-out;font-weight:700}.flag-delta{font-size:.6rem;margin-left:1px;vertical-align:super}.reg-role-legend{display:flex;flex-wrap:wrap;gap:.3rem .75rem;margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--border-color)}.reg-role-legend span{font-size:.62rem;color:var(--text-secondary);font-family:var(--font-mono)}.trace-log{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem;font-family:var(--font-mono);font-size:.68rem}.trace-entry{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;padding:.3rem .5rem;border-radius:5px;background:#ffffff08;border:1px solid var(--border-color)}.trace-cycle{color:var(--text-secondary);white-space:nowrap;flex-shrink:0}.trace-inst{color:var(--accent-color);font-weight:500;white-space:nowrap}.trace-changes{color:#3fb950;flex:1;word-break:break-all}.trace-flags{color:#d29922;white-space:nowrap}:root[data-theme=light] .trace-entry{background:#00000008}.ref-card{display:flex;flex-direction:column;gap:.5rem}.ref-card-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;background:#ffffff0a;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:background .15s,color .15s}.ref-card-toggle:hover{background:#2f81f714;color:var(--accent-color);border-color:var(--accent-color)}.ref-card-body{background:#ffffff08;border:1px solid var(--border-color);border-radius:8px;padding:.75rem;max-height:360px;overflow-y:auto}.ref-section-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:.75rem 0 .3rem}.ref-section-title:first-child{margin-top:0}.ref-table{width:100%;border-collapse:collapse}.ref-table tr+tr td{border-top:1px solid var(--border-color)}.ref-table td{padding:.2rem .35rem;vertical-align:top}.ref-syntax{font-family:var(--font-mono);font-size:.67rem;color:var(--accent-color);white-space:nowrap;width:1%;padding-right:.75rem}.ref-desc{font-size:.68rem;color:var(--text-secondary)}:root[data-theme=light] .ref-card-body{background:#00000005}.pseudocode-panel{display:flex;flex-direction:column;gap:.5rem}.pseudocode-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;background:#ffffff0a;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:background .15s,color .15s}.pseudocode-toggle:hover{background:#a371f714;color:#a371f7;border-color:#a371f7}.pseudocode-body{background:#ffffff08;border:1px solid var(--border-color);border-radius:8px;padding:.5rem;max-height:300px;overflow-y:auto;font-family:var(--font-mono);font-size:.68rem}.pseudo-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.4rem;padding:.18rem .4rem;border-radius:4px}.pseudo-row.active{background:#2f81f71f;outline:1px solid rgba(47,129,247,.3)}.pseudo-asm{color:var(--text-primary)}.pseudo-arrow{color:var(--text-secondary);font-size:.7rem}.pseudo-code{color:#a371f7}.pseudo-label{grid-column:1 / -1;color:#d29922;font-style:italic;padding:.1rem .4rem}:root[data-theme=light] .pseudocode-body{background:#00000005}.exercise-panel{display:flex;flex-direction:column;gap:.5rem}.exercise-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;background:#ffffff0a;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:background .15s,color .15s}.exercise-toggle:hover{background:#3fb95014;color:#3fb950;border-color:#3fb950}.exercise-body{display:flex;flex-direction:column;gap:.5rem}.exercise-card{background:#ffffff08;border:1px solid var(--border-color);border-radius:8px;padding:.65rem .75rem;cursor:pointer;transition:border-color .15s}.exercise-card:hover{border-color:#ffffff26}.exercise-card.expanded{border-color:#2f81f74d}.exercise-card-header{display:flex;align-items:center;gap:.5rem}.exercise-ch{font-size:.6rem;font-weight:700;padding:.15rem .4rem;border-radius:4px;background:#ffffff0f;flex-shrink:0;font-family:var(--font-mono)}.exercise-title{font-size:.78rem;font-weight:600;color:var(--text-primary)}.exercise-desc{font-size:.72rem;color:var(--text-secondary);margin:.5rem 0 0;line-height:1.5}.exercise-hint{font-size:.7rem;color:#d29922;background:#d2992214;border:1px solid rgba(210,153,34,.2);border-radius:6px;padding:.4rem .6rem;margin-top:.4rem;line-height:1.5}.exercise-actions{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}.exercise-result{font-size:.72rem;font-weight:600;padding:.3rem .6rem;border-radius:6px;margin-top:.4rem}.exercise-result.pass{background:#3fb9501f;color:#3fb950;border:1px solid rgba(63,185,80,.3)}.exercise-result.fail{background:#f851491a;color:#f85149;border:1px solid rgba(248,81,73,.3)}.exercise-hint-btn{font-size:.68rem;height:26px;padding:0 .6rem;color:#d29922;border-color:#d299224d}:root[data-theme=light] .exercise-card{background:#00000005}.calling-conv-panel{display:flex;flex-direction:column;gap:.5rem}.calling-conv-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;background:#ffffff0a;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:background .15s,color .15s}.calling-conv-toggle:hover{background:#2f81f714;color:var(--accent-color);border-color:var(--accent-color)}.calling-conv-body{background:#ffffff08;border:1px solid var(--border-color);border-radius:8px;padding:.75rem}.conv-section-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:.75rem 0 .4rem}.conv-section-title:first-child{margin-top:0}.conv-table{width:100%;border-collapse:collapse;font-size:.68rem}.conv-table th{text-align:left;color:var(--text-secondary);font-weight:600;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .4rem .4rem}.conv-table td{padding:.22rem .4rem;vertical-align:middle;border-top:1px solid var(--border-color);color:var(--text-primary)}.conv-reg{font-family:var(--font-mono);color:var(--accent-color);white-space:nowrap}.conv-preserved-yes{color:#3fb950;font-weight:600;font-size:.65rem}.conv-preserved-no{color:var(--text-secondary);font-size:.65rem}.conv-timeline{display:flex;flex-direction:column;gap:0;margin-top:.25rem;list-style:none;padding:0;margin-left:0}.conv-step{display:flex;align-items:flex-start;gap:.6rem;position:relative;padding-bottom:.6rem}.conv-step:last-child{padding-bottom:0}.conv-step-num{width:20px;height:20px;border-radius:50%;background:var(--accent-color);color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.conv-step:not(:last-child) .conv-step-num:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:1px;height:calc(100% + .6rem - 2px);background:var(--border-color)}.conv-step-text{font-size:.7rem;color:var(--text-secondary);line-height:1.4;padding-top:.15rem}.conv-step-text code{font-family:var(--font-mono);color:var(--accent-color);font-size:.68rem;background:#2f81f71a;padding:0 .25rem;border-radius:3px}:root[data-theme=light] .calling-conv-body{background:#00000005}.learning-tools-section{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-color);border-radius:10px;overflow:hidden}.learning-tools-toggle{display:flex;align-items:center;gap:.55rem;width:100%;padding:.6rem .85rem;background:#2f81f70f;border:none;color:var(--accent-color);font-size:.82rem;font-weight:700;cursor:pointer;font-family:var(--font-sans);letter-spacing:.01em;transition:background .15s;text-align:left}.learning-tools-toggle:hover{background:#2f81f71f}.learning-tools-body{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-top:1px solid var(--border-color);background:#ffffff04}:root[data-theme=light] .learning-tools-toggle{background:#4f46e50f;color:#4f46e5}:root[data-theme=light] .learning-tools-toggle:hover{background:#4f46e51a}:root[data-theme=light] .learning-tools-body{background:#00000003}
