:root{--si-ink: #14181C;--si-ink-60: #565A62;--si-ink-30: #9A9DA3;--si-panel: #ECE6D9;--si-paper: #F3EFE6;--si-card: #FAF8F2;--si-line: rgba(20, 24, 28, .12);--si-line-soft: rgba(20, 24, 28, .08);--si-reg: #1F5FA6;--si-reg-tint: #E6EEF7;--si-reg-edge: #4A87C4;--si-stack: #B0710C;--si-stack-tint: #F4ECDB;--si-stack-edge:#D2902F;--si-alu: #B32A45;--si-alu-tint: #F6E3E6;--si-alu-edge: #CF4F68;--si-cache: #1F7A52;--si-cache-tint: #E2F0E8;--si-cache-edge:#2F9B6D;--si-bus: #6A45AD;--si-bus-tint: #ECE4F6;--si-bus-edge: #8A68C9;--si-control: #0E7385;--si-control-tint:#DDEFF2;--si-control-edge:#2F96A8;--si-state-hit: var(--si-cache);--si-state-miss: var(--si-alu);--si-state-dirty: var(--si-stack);--si-state-active-ring: rgba(31, 95, 166, .1);--si-font-sans: "IBM Plex Sans", system-ui, sans-serif;--si-font-mono: "IBM Plex Mono", ui-monospace, monospace;--si-fs-display: 48px;--si-fs-h1: 36px;--si-fs-title: 24px;--si-fs-body: 16px;--si-fs-data: 14px;--si-fs-label: 11px;--si-tracking-label: .14em;--si-sp-1: 4px;--si-sp-2: 8px;--si-sp-3: 12px;--si-sp-4: 16px;--si-sp-6: 24px;--si-sp-8: 32px;--si-sp-12: 48px;--si-r-sm: 2px;--si-r-md: 3px;--si-r-lg: 4px;--si-stroke: 1px;--si-stroke-strong: 1.5px;--si-grid: 30px;--si-grid-line: rgba(20, 24, 28, .035);--si-t-snap: .12s;--si-t-base: .24s;--si-t-move: .6s;--si-t-fill: .9s;--si-ease-standard: cubic-bezier(.2, 0, 0, 1);--si-ease-enter: cubic-bezier(0, 0, 0, 1);--si-ease-exit: cubic-bezier(.4, 0, 1, 1)}.si-surface{background:var(--si-paper);background-image:linear-gradient(var(--si-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--si-grid-line) 1px,transparent 1px);background-size:var(--si-grid) var(--si-grid);color:var(--si-ink);font-family:var(--si-font-sans)}@keyframes si-write-in{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes si-pulse{0%,to{box-shadow:0 0 #1f7a5200}50%{box-shadow:0 0 0 8px #1f7a5224}}@keyframes si-packet{0%{left:1%;opacity:0}12%{opacity:1}88%{opacity:1}to{left:92%;opacity:0}}@keyframes si-cursor{0%,49%{opacity:1}50%,to{opacity:0}}*{box-sizing:border-box}body{margin:0}#app{padding:var(--si-sp-6)}.app{border:1px solid var(--si-line);border-radius:var(--si-r-lg);overflow:hidden;background:var(--si-paper);max-width:1200px;margin:0 auto}.topbar{display:flex;align-items:center;gap:var(--si-sp-3);padding:var(--si-sp-2) var(--si-sp-4);background:var(--si-card);border-bottom:1px solid var(--si-line)}.topbar .title{font-weight:700;font-size:var(--si-fs-data)}.phases{display:flex;gap:var(--si-sp-1);margin-left:var(--si-sp-2)}.ph{font-size:10px;font-family:var(--si-font-mono);letter-spacing:.08em;padding:3px 8px;border:1px solid var(--si-line);border-radius:var(--si-r-md);color:var(--si-ink-60);background:var(--si-paper);transition:all var(--si-t-snap) var(--si-ease-standard)}.ph.on{background:var(--si-control-tint);border-color:var(--si-control-edge);color:var(--si-control);font-weight:600}.controls{margin-left:auto;display:flex;gap:var(--si-sp-2);align-items:center}.btn{font-size:11px;font-family:var(--si-font-mono);padding:5px 11px;border:1px solid var(--si-line);border-radius:var(--si-r-md);background:var(--si-paper);color:var(--si-ink);cursor:pointer}.btn:hover{border-color:var(--si-ink-30)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--si-control);border-color:var(--si-control);color:#fff}.scrub{width:160px;accent-color:var(--si-control)}.cycle{font-family:var(--si-font-mono);font-size:11px;color:var(--si-ink-60);min-width:56px}.layA{display:grid;grid-template-columns:250px 1fr;min-height:460px}.left{border-right:1px solid var(--si-line);padding:var(--si-sp-3);display:flex;flex-direction:column;gap:var(--si-sp-3);background:var(--si-card)}.center{padding:var(--si-sp-4);display:flex;flex-direction:column;gap:var(--si-sp-3);background-image:linear-gradient(var(--si-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--si-grid-line) 1px,transparent 1px);background-size:var(--si-grid) var(--si-grid)}.panel{background:var(--si-card);border:1px solid var(--si-line);border-radius:var(--si-r-lg);padding:var(--si-sp-3)}.panel>.label{display:block;margin-bottom:var(--si-sp-2)}.label{font-size:var(--si-fs-label);letter-spacing:var(--si-tracking-label);text-transform:uppercase;color:var(--si-ink-60);font-weight:600}.mono{font-family:var(--si-font-mono);font-size:12px}.code{overflow-x:auto}.code .row{font-family:var(--si-font-mono);font-size:11.5px;line-height:1.75;color:var(--si-ink);white-space:pre;width:max-content;min-width:100%;border-left:3px solid transparent;padding-left:var(--si-sp-2);padding-right:var(--si-sp-2)}.code .row.cur{background:var(--si-control-tint);border-left-color:var(--si-control)}.bits{display:flex;gap:var(--si-sp-1);flex-wrap:wrap}.bf{font-family:var(--si-font-mono);font-size:10px;padding:3px 7px;border-radius:var(--si-r-md);border:1px solid}.bf.opcode{background:var(--si-control-tint);border-color:var(--si-control-edge);color:var(--si-control)}.bf.rd,.bf.rs,.bf.reg,.bf.base{background:var(--si-reg-tint);border-color:var(--si-reg-edge);color:var(--si-reg)}.bf.imm,.bf.addr{background:var(--si-stack-tint);border-color:var(--si-stack-edge);color:var(--si-stack)}.dp-row{display:grid;grid-template-columns:1fr 110px 1fr;gap:var(--si-sp-4);align-items:start}.cache-row{grid-template-columns:1fr 1fr 1fr}.regs{display:grid;grid-template-columns:1fr 1fr;gap:var(--si-sp-1)}.reg{display:flex;justify-content:space-between;font-family:var(--si-font-mono);font-size:11px;padding:3px 8px;background:var(--si-reg-tint);border:1px solid var(--si-reg-edge);border-radius:var(--si-r-md);color:var(--si-reg)}.reg b{color:var(--si-ink);font-weight:600}.reg .val.changed{animation:si-write-in var(--si-t-base) var(--si-ease-enter)}.flags{display:flex;gap:var(--si-sp-1);margin-top:var(--si-sp-2)}.flag{font-family:var(--si-font-mono);font-size:10px;width:28px;text-align:center;padding:3px 0;border:1px solid var(--si-line);border-radius:var(--si-r-md);color:var(--si-ink-30);transition:all var(--si-t-snap) var(--si-ease-standard)}.flag.set{background:var(--si-alu-tint);border-color:var(--si-alu-edge);color:var(--si-alu);font-weight:600}.alu-box{display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px;padding:var(--si-sp-2);border:var(--si-stroke-strong) solid var(--si-alu-edge);background:var(--si-alu-tint);border-radius:var(--si-r-lg);color:var(--si-alu);font-family:var(--si-font-mono);font-size:11px;font-weight:600}.alu-box.active{animation:si-pulse var(--si-t-base) var(--si-ease-standard)}.stack-cells{display:flex;flex-direction:column;gap:3px}.cell{font-family:var(--si-font-mono);font-size:10.5px;padding:3px 8px;border:1px solid var(--si-stack-edge);background:var(--si-stack-tint);border-radius:var(--si-r-md);color:var(--si-stack);display:flex;justify-content:space-between;gap:var(--si-sp-3)}.cell.sp{outline:2px solid var(--si-stack);outline-offset:1px}.stack-empty{font-family:var(--si-font-mono);font-size:10px;color:var(--si-ink-30)}.lvl{border:1px solid var(--si-cache-edge);background:var(--si-cache-tint);border-radius:var(--si-r-lg);padding:var(--si-sp-2) var(--si-sp-3)}.lvl .label{color:var(--si-cache)}.lines{display:flex;gap:3px;margin-top:var(--si-sp-1)}.ln{flex:1;height:18px;border-radius:var(--si-r-sm);background:var(--si-card);border:1px solid var(--si-cache-edge);font-family:var(--si-font-mono);font-size:8px;display:flex;align-items:center;justify-content:center;color:var(--si-cache);overflow:hidden;transition:background var(--si-t-fill) var(--si-ease-standard)}.ln.filled{background:var(--si-cache);color:#fff;opacity:.85}.ln.filling{animation:si-pulse var(--si-t-fill) var(--si-ease-standard)}.ln.miss{background:var(--si-alu);border-color:var(--si-alu-edge);color:#fff}.ln.dirty{background:var(--si-stack);border-color:var(--si-stack-edge);color:#fff}.mem{border:1px solid var(--si-line);background:var(--si-panel);border-radius:var(--si-r-lg);padding:var(--si-sp-2) var(--si-sp-3)}.dram-vals{font-size:11px;color:var(--si-ink-60);margin-top:var(--si-sp-1)}.bus-wrap{display:flex;align-items:center;gap:var(--si-sp-2)}.bus-tag{font-family:var(--si-font-mono);font-size:9px;color:var(--si-bus);background:var(--si-bus-tint);border:1px solid var(--si-bus-edge);border-radius:10px;padding:1px 9px;white-space:nowrap}.bus-line{position:relative;flex:1;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--si-bus) 0 10px,transparent 10px 18px);opacity:.5}.bus-line .packet{position:absolute;top:-4px;left:1%;width:10px;height:10px;border-radius:50%;background:var(--si-bus);box-shadow:0 0 0 4px var(--si-bus-tint);opacity:0}.bus-line.run{opacity:1}.bus-line.run .packet{animation:si-packet var(--si-t-move) var(--si-ease-standard)}.narration{border-top:1px solid var(--si-line);background:var(--si-card);padding:var(--si-sp-3) var(--si-sp-4);display:flex;align-items:center;justify-content:space-between;gap:var(--si-sp-4);min-height:22px}.nar-text{font-family:var(--si-font-mono);font-size:var(--si-fs-data);color:var(--si-ink)}.keys-hint{display:flex;align-items:center;gap:4px;font-size:var(--si-fs-label);color:var(--si-ink-30);white-space:nowrap;flex-shrink:0}.kbd{font-family:var(--si-font-mono);font-size:11px;line-height:1;padding:3px 6px;color:var(--si-ink-60);background:var(--si-paper);border:1px solid var(--si-line);border-bottom-width:2px;border-radius:var(--si-r-md)}.footer{border-top:1px solid var(--si-line);padding:var(--si-sp-3) var(--si-sp-4);font-family:var(--si-font-mono);font-size:var(--si-fs-label);color:var(--si-ink-30);text-align:center}.credit{color:var(--si-ink-60);text-decoration:none;border-bottom:1px solid var(--si-line)}.credit:hover{color:var(--si-ink)}.btn-arrow{min-width:34px;text-align:center;font-size:12px}.asm-error{color:var(--si-alu);font-family:var(--si-font-mono);padding:var(--si-sp-4)}