:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#dce6ed;background:#0a1019;font-size:14px;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select,input:not([type=file]){color:inherit;border:1px solid #364553;background:#182432;border-radius:7px;padding:8px 10px}button{cursor:pointer;white-space:nowrap}button:hover:not(:disabled){background:#273b4c}button:disabled{opacity:.42;cursor:not-allowed}button.primary{background:#12a899;color:#081b1b;border-color:#12a899;font-weight:750}button.primary:hover:not(:disabled){background:#35d2bc}input:focus,button:focus-visible,select:focus{outline:2px solid #23baaa;outline-offset:2px}kbd{font-size:10px;font-weight:500;border:1px solid #6b8c86;border-radius:3px;padding:2px 3px;margin-left:6px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px max(22px,calc((100vw - 1520px)/2));border-bottom:1px solid #263441;background:#101925}.brand{display:flex;align-items:center;gap:13px}.brandmark{font-family:ui-monospace,monospace;font-size:30px;font-weight:900;color:#68e3c4;letter-spacing:-2px}.slash{color:#536775}.brand b{font-size:15px;letter-spacing:.16em}.brand small{display:block;font-size:10px;letter-spacing:.08em;color:#8394a6;margin-top:4px}.topright{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.tag,.pill{font-size:11px;border:1px solid #364553;padding:6px 9px;border-radius:100px;color:#9fb4c5}.pill{border-color:#52606a;color:#d5dfe9}.pill.running{color:#62dbc4;border-color:#277d71;background:#14342e}.pill.halted{color:#edbf6e;border-color:#967437;background:#33291a}.workspace{max-width:1560px;margin:auto;padding:20px}.toolbar{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;align-items:center}.controlgroup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.secondary-controls label{color:#9fb4c5;font-size:12px}#message{min-height:32px;padding:11px 0 8px;color:#91aaaf;font-size:12px}.error{color:#ff988c!important}.panels{display:grid;grid-template-columns:1.1fr .9fr;gap:15px}.panel{min-width:0;border:1px solid #2a3a49;background:#121d2a;border-radius:12px;overflow:hidden}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #293848;padding:12px 16px}.panelhead h2{font-size:13px;letter-spacing:.035em;margin:0}.panelhead small{font-size:11px;color:#798ea3}.terminal,.memory,.code-list,.regpairs,.counter,.flags{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.terminal{height:270px;margin:0;padding:17px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;background:#071a15;color:#a1f1c5;font-size:13px}.inputline{display:flex;gap:8px;align-items:center;padding:10px 12px;background:#0d201c;color:#66c7a7}.inputline input{flex:1;min-width:0;background:#122a24;border-color:#2d5a49;font:13px ui-monospace,monospace;color:#a8f3ca}.inputline button{font-size:12px;background:#215444;border-color:#326952}.reggrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px}.reggroup h3{font-size:11px;color:#879caf;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin:0 0 10px}.regpairs{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:12px;color:#90a8bb}.regpairs>div{display:flex;justify-content:space-between;gap:5px;padding-bottom:6px;border-bottom:1px solid #253644}.regpairs b{font-weight:600;color:#e5f6ff}.regpairs.extended{grid-template-columns:repeat(4,1fr);margin:0 14px 15px}.flags{padding:11px 14px;display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid #293848}.flag{font-size:10px;border:1px solid #354453;border-radius:5px;padding:6px 7px;color:#8296a8}.flag b{color:#9badb9}.flag.active{background:#145448;color:#aaf9df;border-color:#23866e}.flag.active b{color:#aaf9df}.counter{border-top:1px solid #293848;display:flex;justify-content:space-between;gap:8px;padding:11px 14px;color:#9aafbf;font-size:11px}.counter b{color:#e1f1fa}.code-list{padding:12px 14px;min-height:276px;line-height:1.75;overflow:auto;white-space:pre;font-size:12px}.instruction{padding:1px 6px;border-radius:4px;color:#a1b7c9}.instruction.selected{background:#1c544f;color:#a8f7d5}.instruction.breakpoint{border-left:3px solid #e08c64}.memory{padding:14px;min-height:210px;margin:0;line-height:1.85;white-space:pre;overflow:auto;font-size:12px;color:#bdcada}.paneltools{display:flex;gap:9px;align-items:center;padding:10px 14px;border-top:1px solid #293848}.paneltools label{white-space:nowrap;font-size:11px;color:#9daebe}.paneltools input{width:106px;font-family:ui-monospace,monospace;font-size:12px}.paneltools button{font-size:12px}.loadbar{border:1px solid #2a3a49;border-radius:12px;padding:16px;background:#131e2a;margin-top:15px}.loadtitle{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:11px}.loadtitle strong{font-size:13px}.loadtitle span,footer{color:#7f97a9;font-size:11px}.loadcontrols{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.loadcontrols select{max-width:260px}.loadcontrols input#origin{width:76px;font:12px ui-monospace,monospace}.loadcontrols input[type=file]{max-width:230px;font-size:11px}.loadcontrols label{font-size:11px;color:#95abbc}.loadcontrols .filelabel{display:none}.or{color:#718699;font-size:11px}footer{margin:20px 0 5px;text-align:center;line-height:1.6}@media(max-width:920px){.panels{grid-template-columns:1fr}.topbar{padding:16px 20px}.terminal{height:220px}}@media(max-width:520px){.workspace{padding:11px}.regpairs.extended{grid-template-columns:1fr 1fr}.reggrid{gap:7px}.panelhead{padding:12px}.topright .tag{display:none}.toolbar{flex-direction:column;align-items:stretch}.controlgroup{justify-content:space-between}.paneltools{flex-wrap:wrap}.memory,.code-list{font-size:11px}.loadcontrols{align-items:stretch}}


/* Register layout: keep each label next to its value rather than spreading
   them across a wide grid cell. Works with Safari 15+ and other browsers. */
.regpairs > div {
  display: grid;
  grid-template-columns: 3ch max-content;
  column-gap: 0.7rem;
  align-items: baseline;
  justify-content: start;
}
.regpairs.extended > div {
  grid-template-columns: 4ch max-content;
}
.regpairs b {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* v0.5 debugger: navigation, breakpoint management, and memory editing. */
.disasm-nav,.bp-controls {flex-wrap:wrap}
.small-note,.panelhint {color:#829cac;font-size:11px}
.panelhint {padding:3px 14px 12px}
.code-list .instruction {display:block;width:100%;margin:0;text-align:left;
  font:inherit;line-height:1.6;letter-spacing:0;white-space:pre;
  background:transparent;border:0;border-left:3px solid transparent;
  padding:2px 7px;cursor:pointer;border-radius:3px;color:#a1b7c9}
.code-list .instruction:hover {background:#263e4b}
.code-list .instruction.selected {background:#1c544f;color:#a8f7d5}
.code-list .instruction.breakpoint {border-left-color:#eb9271;color:#ffd4c4}
.code-list .instruction.selected.breakpoint {background:#5e3c32;color:#ffe6da}
.code-list .instruction:focus-visible {outline:2px solid #6be4d1;outline-offset:0}
.breakpoint-list {display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 10px;min-height:22px}
.bp-chip {font:12px ui-monospace,monospace;color:#ffcbbd;
  background:#362925;border:1px solid #8e5145;border-radius:6px;padding:5px 8px}
.bp-chip:hover {background:#674035}
.bp-empty {color:#7b94a7;font-size:11px}
.memory-editor {padding:12px 14px 14px;border-top:1px solid #293848}
.memory-edit-title {font-size:12px;color:#d5e6ed;font-weight:650;margin-bottom:9px}
.memory-edit-title span {font-size:10px;color:#869eb0;font-weight:400;margin-left:8px}
.memory-edit-fields {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.memory-edit-fields label {font-size:11px;color:#9dafbe}
.memory-edit-fields input {font:12px ui-monospace,monospace}
#memory-edit-at {width:84px}
#memory-edit-bytes {min-width:165px;flex:1}
@media(max-width:520px){.memory-edit-fields label{width:100%}#memory-edit-bytes{min-width:100%}}

/* v0.6 assembler / PC toolbar */
.pc-label{font-size:11px;color:#9bb0c0;margin-left:7px}
#pc-set-value{width:74px;font:12px ui-monospace,monospace}
.assembler-panel{margin-top:16px;overflow:hidden}
.assembler-tools,.assembler-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:13px 16px;border-bottom:1px solid #2a3a49}
.assembler-tools label,.assembler-actions span{font-size:12px;color:#a2b5c5}
.assembler-tools select{max-width:200px}
.assembler-tools input[type=file]{max-width:220px;font-size:11px}
.asm-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.asm-editor-wrap,.asm-result-wrap{min-width:0}
.asm-editor-wrap>label,.asm-result-wrap>label{display:block;color:#b4c8d6;font-size:12px;font-weight:650;margin-bottom:8px}
.asm-editor-shell{display:flex;height:310px;overflow:hidden;border:1px solid #334656;border-radius:9px;background:#0d1824}
.asm-line-numbers{flex:0 0 46px;overflow:hidden;white-space:pre;text-align:right;padding:12px 8px 12px 0;background:#152535;color:#638093;border-right:1px solid #294052;font:13px/20px ui-monospace,SFMono-Regular,monospace;user-select:none}
.asm-input-shell{position:relative;flex:1;min-width:0;overflow:hidden}
#asm-source,#asm-highlight{box-sizing:border-box;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:12px;tab-size:4;font:13px/20px ui-monospace,SFMono-Regular,monospace;letter-spacing:0;white-space:pre;overflow:auto;overflow-wrap:normal}
#asm-highlight{pointer-events:none;overflow:hidden;color:#c3d6e1;background:transparent}
#asm-source{z-index:1;resize:none;background:transparent;color:transparent;caret-color:#a0f7db;border:0;outline:none;-webkit-text-fill-color:transparent}
#asm-source::selection{background:#35675c;-webkit-text-fill-color:#d8f5f0;color:#d8f5f0}
#asm-source:focus-visible{outline:2px solid #40b4aa;outline-offset:-2px}
.asm-keyword{color:#5de1bc}.asm-dir{color:#79baf3}.asm-number{color:#ffc58b}.asm-comment{color:#7391a1}.asm-string{color:#f1be97}.asm-label{color:#d5adf8}
.asm-listing{box-sizing:border-box;height:310px;margin:0;padding:12px;overflow:auto;border:1px solid #334656;border-radius:9px;background:#0d1824;color:#bad0dd;white-space:pre;font:12px/20px ui-monospace,SFMono-Regular,monospace}
.asm-hint{margin:0;padding:0 16px 15px;font-size:11px;line-height:1.6;color:#90a9b7}
#asm-status{flex:1;min-width:160px}
#asm-status.error{color:#ffaf9e}
@media(max-width:920px){.asm-columns{grid-template-columns:1fr}.asm-editor-shell,.asm-listing{height:260px}}
@media(max-width:520px){.assembler-tools input[type=file]{max-width:100%}.asm-columns{padding:10px}.asm-line-numbers{flex-basis:37px}}

/* v0.7: line-accurate source debugger; no new Safari/WASM features required. */
.asm-line-numbers{padding:12px 0;flex-basis:54px}
.asm-gutter-line{display:block;box-sizing:border-box;width:100%;height:20px;line-height:20px;
  font:inherit;text-align:right;padding:0 9px 0 2px;margin:0;border:0;border-radius:0;
  color:#68889d;background:transparent}
button.asm-gutter-line{cursor:pointer;color:#a4c7d0}
button.asm-gutter-line:hover{background:#254454;color:#e4f7fa}
button.asm-gutter-line.source-breakpoint{color:#ffb8a0;background:#422b2a}
.asm-gutter-line.source-current{background:#1d514b;color:#b1f5e5;font-weight:700}
button.asm-gutter-line.source-current.source-breakpoint{background:#674139;color:#fff0e6}
.asm-gutter-line:focus-visible{outline:2px solid #6be4d1;outline-offset:-2px}
#asm-highlight .asm-source-line{display:inline-block;min-width:100%;height:20px;vertical-align:top}
#asm-highlight .asm-source-line.source-current{background:#1c4944;box-shadow:inset 3px 0 #5edbc1}
.asm-debug-status{min-height:21px;padding:4px 16px 10px;font-size:12px;color:#91b8bb}
.asm-debug-status.unmapped{color:#adac97}

/* Portable session control, independent of the assembler workspace. */
.sessionbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:0.7rem 1rem;border-radius:10px;border:1px solid var(--border, #354050);
  background:var(--panel, #18212d)}
.sessionbar>div:first-child{display:flex;align-items:baseline;gap:0.8rem;flex-wrap:wrap}
.sessionbar span{font-size:.8rem;opacity:.75}
.session-controls{display:flex;align-items:center;gap:.6rem}
.session-controls label{cursor:pointer}
.session-controls .busy{opacity:.45;pointer-events:none}

.session-controls .filelabel{display:inline-block;font-size:12px;padding:8px 12px;
  border:1px solid #364553;border-radius:7px;background:#182432;color:#dce6ed}
.session-controls .filelabel:hover{background:#273b4c}
#session-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.session-controls .filelabel:focus-within{outline:2px solid #23baaa}


/* v0.9 source stepping and line-oriented assembly diagnostics. */
#source-step{border-color:#327f77;background:#163b3b;color:#c3f5e9}
#source-step:disabled{opacity:.43;cursor:not-allowed}
#asm-highlight .asm-source-line.source-error{background:#482c35;box-shadow:inset 3px 0 #f08084}
.asm-gutter-line.source-error{color:#ffc4b9;background:#593337}
.asm-gutter-line.source-error.source-current{background:#734e45;color:#fff0dd}
.asm-diagnostics{margin-top:8px;display:flex;flex-direction:column;gap:5px;max-height:125px;overflow:auto}
.asm-diagnostics:empty{display:none}
.asm-diagnostic{display:block;text-align:left;font:12px/1.5 ui-monospace,SFMono-Regular,monospace;
  color:#ffd0c6;background:#3d242b;border:1px solid #85494c;border-radius:6px;
  padding:5px 9px;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.asm-diagnostic:hover,.asm-diagnostic:focus-visible{background:#61353b;outline-color:#f5a09c}
/* Public v1.0 release: header help link and a readable help page. */
.help-link{display:inline-block;text-decoration:none;color:#8eefd4;border:1px solid #277c70;
  border-radius:7px;padding:7px 11px;font-size:12px;font-weight:650}
.help-link:hover,.help-link:focus-visible{background:#193b35;color:#cefff2}
.help-page{max-width:980px;margin:0 auto;padding:22px 16px 56px}
.help-page h1{font-size:26px;margin:0 0 8px;color:#e6f7f8}
.help-page .lead{color:#a1b9c7;line-height:1.65;margin:0 0 24px}
.help-section{border:1px solid #2a3a49;background:#121d2a;border-radius:12px;margin:14px 0;padding:22px}
.help-section h2{font-size:17px;margin:0 0 12px;color:#72e4c7}
.help-section h3{font-size:14px;margin:18px 0 7px}
.help-section p,.help-section li{line-height:1.65;color:#c1d0da}
.help-section li{margin:7px 0}
.help-section code,.help-section kbd{background:#1d2d3d;padding:2px 5px;border-radius:4px;color:#c6f2e8}
.help-section a,.help-page a{color:#8eefd4}
.help-section a:hover,.help-page a:hover{text-decoration:none}
.help-section ul,.help-section ol{padding-left:24px}
.help-section .notice{font-size:12px;color:#9cb7c2}