*{box-sizing:border-box;margin:0;padding:0}body{color:#ccc;background:#111;min-height:100vh;font-family:Segoe UI,system-ui,sans-serif}#app{width:100%;min-height:100vh;display:flex}#sidebar{background:#1a1a1a;border-right:1px solid #333;flex-direction:column;flex-shrink:0;gap:20px;width:320px;min-height:100vh;padding:20px 16px;display:flex;overflow-y:auto}#canvas-area{flex:1;justify-content:center;align-items:flex-start;padding:24px;display:flex}#screen{image-rendering:pixelated}.mode-selector{flex-direction:column;gap:6px;display:flex}.mode-selector h3{text-transform:uppercase;letter-spacing:1px;color:#666;margin-bottom:4px;font-size:11px;font-weight:500}.mode-option{cursor:pointer;border-radius:6px;align-items:center;gap:8px;padding:6px 10px;font-size:14px;transition:background .15s;display:flex}.mode-option:hover{background:#252525}.mode-option input[type=radio]{accent-color:#6a9}.panel{flex-direction:column;gap:14px;display:none}.panel.active{display:flex}.panel-label{text-transform:uppercase;letter-spacing:1px;color:#666;font-size:11px;font-weight:500}.input-group{flex-direction:column;gap:6px;display:flex}.input-row{align-items:center;gap:10px;display:flex}.input-row label{color:#aaa;min-width:64px;font-size:13px}.input-row input[type=number],.input-row select,.input-group>select{color:#eee;background:#222;border:1px solid #444;border-radius:4px;flex:1;padding:6px 8px;font-family:Consolas,Monaco,monospace;font-size:13px}.input-row input[type=number]:focus,.input-row select:focus,.input-group>select:focus{border-color:#6a9;outline:none}.btn{color:#ddd;cursor:pointer;background:#2a2a2a;border:1px solid #444;border-radius:4px;padding:6px 14px;font-size:13px;transition:background .15s}.btn:hover{background:#363636}.btn:active{background:#444}.nav-grid{grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr 1fr;gap:4px;width:120px;display:grid}.nav-grid .btn{text-align:center;min-width:0;padding:6px;font-size:14px}.nav-up{grid-area:1/2}.nav-left{grid-area:2/1}.nav-right{grid-area:2/3}.nav-down{grid-area:3/2}.nav-diff-row{gap:20px;display:flex}.nav-section,.diff-section{flex-direction:column;gap:6px;display:flex}.diff-controls{align-items:center;gap:6px;display:flex}.diff-display{color:#eee;text-align:center;min-width:24px;font-family:Consolas,Monaco,monospace;font-size:18px}.diff-controls .btn{min-width:0;padding:6px 10px;font-size:14px}.info-text{color:#777;font-size:12px;line-height:1.5}.divider{border:none;border-top:1px solid #2a2a2a;margin:4px 0}.playback-controls{align-items:center;gap:4px;display:flex}.playback-controls .btn{padding:4px 8px;font-family:monospace;font-size:12px}.scale-slider,.speed-slider{align-items:center;gap:8px;display:flex}.scale-slider input[type=range],.speed-slider input[type=range]{accent-color:#6a9;flex:1}.scale-slider span,.speed-slider span{color:#888;min-width:40px;font-family:monospace;font-size:12px}.scale-slider label{color:#aaa;min-width:40px;font-size:13px}#source-viewer{color:#d4d4d4;tab-size:8;background:#1e1e1e;width:100%;height:calc(100vh - 48px);margin:0;padding:8px 0;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;line-height:1.4;display:none;overflow:auto}.source-line{white-space:pre;padding:0 12px}.source-line:hover{background:#2a2d2e}.source-line.highlight{background:#3a3d41}.tok-linenum{color:#555;text-align:right;-webkit-user-select:none;user-select:none;min-width:5ch;margin-right:1.5ch;display:inline-block}.tok-comment{color:#6a9955}.tok-label{color:#4ec9b0}.tok-label-ref{cursor:pointer}.tok-label-ref:hover{text-decoration:underline}.tok-opcode{color:#c586c0}.tok-operand{color:#b5cea8}.tok-directive{color:#c586c0}.tok-constant{color:#4ec9b0}.tok-text{color:#d4d4d4}