:root{--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;font-family:var(--sans);color:#15202b;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f7fa}*{box-sizing:border-box}html,body,#root{width:100%;min-width:0;min-height:100%;margin:0}body{min-height:100svh}button,textarea{font:inherit}.app-shell{color:#15202b;background:#eef2f6;flex-direction:column;min-height:100svh;display:flex}.topbar{background:linear-gradient(#fff 0%,#f8fafc 100%);border-bottom:1px solid #cfd8e3;grid-template-columns:118px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:56px;padding:0 14px;display:grid}.brand{align-items:center;gap:8px;min-width:0;display:flex}.brand svg{color:#2563eb}.brand h1{letter-spacing:0;margin:0;font-size:20px;font-weight:700;line-height:1}.toolbar{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.example-picker{color:#475569;min-width:188px;height:36px;font:700 12px/1 var(--sans);background:#fff;border:1px solid #cbd5e1;border-radius:6px;grid-template-columns:auto minmax(112px,1fr);align-items:center;gap:8px;padding:0 10px;display:inline-grid}.example-picker span{color:#64748b;text-transform:uppercase}.example-picker select{color:#0f172a;min-width:0;font:600 13px/1 var(--sans);background:0 0;border:0;outline:0}.tool-button,.icon-button{color:#0f172a;height:36px;font:600 14px/1 var(--sans);cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:6px;justify-content:center;align-items:center;gap:8px;display:inline-flex}.tool-button{padding:0 12px}.icon-button{width:36px;padding:0}.tool-button:hover:not(:disabled),.icon-button:hover:not(:disabled){background:#f8fafc;border-color:#64748b}.tool-button:focus-visible,.icon-button:focus-visible{outline-offset:2px;outline:2px solid #2563eb}.tool-button:disabled,.icon-button:disabled{opacity:.45;cursor:not-allowed}.tool-button.primary{color:#fff;background:#2563eb;border-color:#2563eb}.runtime-status{border-left:1px solid #e2e8f0;border-right:1px solid #e2e8f0;grid-template-columns:92px 78px 92px minmax(180px,1fr);align-self:stretch;align-items:stretch;gap:0;min-width:0;display:grid}.status-item{background:#fff;border-right:1px solid #e2e8f0;border-radius:0;flex-direction:column;justify-content:center;gap:3px;min-width:0;min-height:0;padding:0 12px;display:flex}.status-item:last-child{border-right:0}.status-item span{color:#64748b;text-transform:uppercase;font-size:11px;font-weight:700}.status-item strong{text-overflow:ellipsis;white-space:nowrap;min-width:0;font:600 12px/1.15 var(--mono);color:#0f172a;overflow:hidden}.status-item.tone-fetch{box-shadow:inset 0 -3px #3b82f6}.status-item.tone-write{box-shadow:inset 0 -3px #f97316}.workspace{grid-template-columns:minmax(210px, var(--left-pane)) 7px minmax(700px, var(--center-pane)) 7px minmax(260px, 1fr);background:#cfd8e3;flex:1;gap:0;min-height:0;display:grid;overflow:hidden}.left-column,.center-column,.right-column{background:#cfd8e3;flex-direction:column;gap:0;min-width:0;min-height:0;display:flex}.panel{background:#fff;flex-direction:column;min-width:0;min-height:0;display:flex}.c-panel{background:#f8fafc}.asm-panel{background:#f7fbff}.trace-panel{background:#fcfbf8}.uart-panel{background:#f7fbff}.registers-panel{background:#fbfefd}.memory-panel{background:#fffdf8}.diagnostics-panel{background:#fff7f7}.left-column .panel:first-child{flex:0 0 var(--left-top)}.left-column .panel:last-child{flex:1 1 0}.center-column .panel:first-child{flex:0 0 var(--center-top)}.center-column .panel:last-child,.trace-panel{flex:1 1 0}.uart-panel,.diagnostics-panel{flex:none}.panel-header{color:#334155;background:#f8fafcd1;border-bottom:1px solid #94a3b847;flex:none;align-items:center;gap:8px;height:42px;padding:0 14px;display:flex}.c-panel .panel-header{background:#eef2f7}.asm-panel .panel-header{background:#eaf4ff}.trace-panel .panel-header{background:#fff5e8}.uart-panel .panel-header{background:#eaf4ff}.registers-panel .panel-header{background:#ebfbf5}.memory-panel .panel-header{background:#fff7db}.diagnostics-panel .panel-header{background:#fee2e2}.resize-handle{z-index:2;background:#cfd8e3;flex:none;position:relative}.resize-handle:before{content:"";background:0 0;transition:background .12s;position:absolute;inset:0}.resize-handle:hover:before,.resize-handle:active:before{background:#7db4f4}.resize-handle.column{cursor:col-resize;width:7px}.resize-handle.row{cursor:row-resize;height:7px}.panel-header h2{letter-spacing:0;margin:0;font-size:14px;font-weight:700;line-height:1}.source-preview,.editor{color:#0f172a;min-height:0;font:13px/1.55 var(--mono);letter-spacing:0;text-align:left;white-space:pre;background:0 0;border:0;flex:1;margin:0;padding:14px;overflow:auto}.editor{resize:none;outline:none}.editor:focus{box-shadow:inset 0 0 0 2px #93c5fd}.code-editor,.asm-listing{color:#0f172a;min-height:0;font:13px/1.55 var(--mono);letter-spacing:0;background:linear-gradient(90deg,#e2e8f0ad 0 44px,#0000 44px),#ffffff85;flex:1;overflow:auto}.code-editor{grid-template-columns:44px minmax(520px,1fr);display:grid}.code-gutter{color:#94a3b8;-webkit-user-select:none;user-select:none;border-right:1px solid #94a3b842;flex-direction:column;align-items:flex-end;padding:12px 8px 12px 0;display:flex}.code-gutter span{height:20.15px;font:12px/20.15px var(--mono)}.code-input{resize:none;color:#0f172a;min-width:520px;min-height:100%;font:13px/1.55 var(--mono);white-space:pre;background:0 0;border:0;outline:none;padding:12px 14px}.code-editor:focus-within{box-shadow:inset 0 0 0 2px #93c5fd}.asm-listing{padding:8px 0}.compiler-flags{color:#475569;font:11px/1.35 var(--mono);white-space:nowrap;background:#ffffff75;border-bottom:1px solid #94a3b840;flex:none;padding:6px 10px;overflow:auto}.asm-line{grid-template-columns:44px minmax(0,1fr);align-items:start;min-width:680px;min-height:20px;padding:1px 14px 1px 0;display:grid}.asm-line:hover{background:#93c5fd29}.asm-line.active{background:#dbeafe;box-shadow:inset 3px 0 #2563eb}.asm-line.active .asm-line-number{color:#1d4ed8;font-weight:800}.asm-line.active code{color:#0f172a;font-weight:700}.asm-line-number{color:#94a3b8;text-align:right;-webkit-user-select:none;user-select:none;font:12px/20px var(--mono);border-right:1px solid #94a3b842;padding-right:8px}.asm-line code{white-space:pre;color:#1f2937;min-width:0;font:13px/20px var(--mono);background:0 0;padding-left:12px}.asm-line.label code{color:#1d4ed8;font-weight:700}.asm-line.directive code{color:#7c3aed}.asm-line.comment code{color:#64748b;font-style:italic}.asm-line.blank{min-height:14px}.trace-grid{flex-direction:column;gap:8px;padding:10px;display:flex;overflow:auto}.trace-line{background:#f8fafcb8;border-left:3px solid #cbd5e1;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:10px;min-height:34px;padding:7px 9px;display:grid}.trace-line span{color:#64748b;font-size:12px;font-weight:700}.trace-line code{text-overflow:ellipsis;white-space:nowrap;color:#0f172a;min-width:0;font:12px/1.2 var(--mono);background:0 0;padding:0;overflow:hidden}.trace-fetch{background:#edf6ff;border-color:#3b82f6}.trace-read,.trace-load{background:#e9fbfc;border-color:#0891b2}.trace-write{background:#fff4e6;border-color:#f97316}.trace-store{background:#fef2f2;border-color:#dc2626}.uart-output{color:#e2e8f0;min-height:54px;max-height:120px;font:13px/1.45 var(--mono);white-space:pre-wrap;background:#0f172a;margin:0;padding:10px 12px;overflow:auto}.diagnostics{color:#991b1b;font:13px/1.5 var(--mono);background:#fef2f2;padding:10px 14px}.diagnostics p{margin:0 0 6px}.diagnostics p:last-child{margin-bottom:0}.register-grid{grid-template-columns:repeat(4,minmax(176px,1fr));align-content:start;gap:4px;min-height:0;padding:6px;display:grid;overflow:auto}.register-cell{background:#ffffffdb;border:1px solid #e2e8f0;border-radius:5px;grid-template-columns:minmax(48px,1fr) max-content;align-items:center;gap:6px;min-width:0;min-height:38px;padding:5px 6px;display:grid}.register-cell div{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:3px;min-width:0;display:grid}.register-cell strong{color:#0f172a;font:700 12px/1 var(--mono)}.register-cell span{color:#64748b;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:700;overflow:hidden}.register-cell code,.memory-cell code{white-space:nowrap;color:#0f172a;min-width:0;font:11px/1 var(--mono);text-align:right;background:0 0;padding:0}.register-cell code{overflow:visible}.register-cell.mark-read{background:#e9fbfc;border-color:#06b6d4;animation:.52s ease-out pulse-read}.register-cell.mark-write{background:#fff4e6;border-color:#f97316;animation:.52s ease-out pulse-write}.memory-legend{color:#64748b;border-bottom:1px solid #94a3b847;flex:none;align-items:center;gap:14px;height:34px;padding:0 10px;font-size:12px;font-weight:700;display:flex}.memory-legend span{align-items:center;gap:6px;display:inline-flex}.swatch{border-radius:2px;width:10px;height:10px;display:inline-block}.swatch.fetch{background:#3b82f6}.swatch.load{background:#22c55e}.swatch.store{background:#ef4444}.swatch.text{background:#e5e7eb}.memory-grid{grid-template-columns:repeat(4,minmax(172px,1fr));align-content:start;gap:5px;min-height:0;padding:8px;display:grid;overflow:auto}.memory-cell{background:#ffffffd6;border:1px solid #e2e8f0;border-radius:5px;grid-template-columns:minmax(58px,auto) minmax(0,1fr);align-items:center;gap:6px;min-width:0;min-height:42px;padding:6px 7px;display:grid}.memory-cell.text{background:#eceff3;border-color:#d1d5db}.memory-cell span{color:#64748b;font:700 11px/1.35 var(--mono)}.memory-meta{flex-direction:column;gap:3px;min-width:0;display:flex}.memory-meta b{text-overflow:ellipsis;white-space:nowrap;color:#2563eb;min-width:0;font-size:10px;line-height:1;overflow:hidden}.memory-cell code.instruction-memory{overflow-wrap:anywhere;white-space:normal;color:#334155;text-align:left;line-height:1.25}.memory-cell.mark-fetch{background:#eff6ff;border-color:#3b82f6;animation:.52s ease-out pulse-fetch}.memory-cell.mark-load{background:#edfdf3;border-color:#22c55e;animation:.52s ease-out pulse-load}.memory-cell.mark-store{background:#fef2f2;border-color:#ef4444;animation:.52s ease-out pulse-store}.empty-state{color:#64748b;text-align:center;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:6px;place-items:center;margin:10px;padding:16px;font-size:13px;display:grid}@keyframes pulse-fetch{0%{box-shadow:0 0 #3b82f673}to{box-shadow:0 0 0 8px #3b82f600}}@keyframes pulse-read{0%{box-shadow:0 0 #06b6d473}to{box-shadow:0 0 0 8px #06b6d400}}@keyframes pulse-write{0%{box-shadow:0 0 #f9731673}to{box-shadow:0 0 0 8px #f9731600}}@keyframes pulse-load{0%{box-shadow:0 0 #22c55e73}to{box-shadow:0 0 0 8px #22c55e00}}@keyframes pulse-store{0%{box-shadow:0 0 #ef44446b}to{box-shadow:0 0 0 8px #ef444400}}@media (width<=1180px){.workspace{grid-template-columns:minmax(210px, var(--left-pane)) 7px minmax(700px, 1fr)}.right-column{grid-column:1/-1;display:flex}.resize-handle.center-right{display:none}}@media (width<=820px){.app-shell{min-height:auto}.topbar{grid-template-columns:1fr;align-items:flex-start;height:auto;min-height:72px;padding:14px}.toolbar{justify-content:flex-start}.runtime-status{grid-template-columns:1fr 1fr;width:100%}.status-item.wide{grid-column:1/-1}.workspace{grid-template-columns:1fr;overflow:visible}.resize-handle{display:none}.left-column,.center-column,.right-column{display:flex}.left-column .panel,.center-column .panel,.right-column .panel{flex:none;min-height:300px}.register-grid{grid-template-columns:1fr}.memory-grid{max-height:520px}}