/* :root replaced by app/6502/lab/lab.css */
/* The light theme restates every token and nothing else: because no rule
   anywhere carries a bare colour, this block IS the theme. Chosen against
   the dark one rather than derived from it -- an inverted lightness gives
   washed-out accents on white, so the three datapath colours are darkened
   until they carry their weight on a pale panel. */
:root[data-theme="light"] .lab-shell{
  --ground:#F2F5F9; --panel:#FFFFFF; --panel2:#E9EEF5; --rule:#C3CEDB;
  --dim:#5F6E80; --mid:#445365; --text:#1F2A37; --bright:#0B1220;
  --addr:#0E7C90; --data:#C43C6E; --alu:#A9700F;
  --phi1:#3F6FA8; --phi2:#B4661F;
  --sunk:#FFFFFF; --code:#EDF1F7; --foot:#EDF1F7;
  --cell:#DFE7F0; --cellrule:#C3CEDB; --lane:#F5F8FC; --mcell:#E3EAF3;
  --cell2:#C7D3E0; --cell3:#DDE5EF; --hotfill:#DCE6F2;
  --hover:#E4EBF4; --onbg:#DCE6F4; --faint:#A8B6C6;
  --reg:#5A6B80; --teal:#137382; --grid:#D5DEE9; --cursor:#9A6B00;
  --t2:#127A5E; --t3:#7A6510; --axis:#4A5A6E;
  --power:#B23225;
}
.lab-shell *{box-sizing:border-box}
html .lab-shell,.lab-shell body{margin:0;padding:0}
/* The page never scrolls sideways; anything wide scrolls inside its own box. */
html .lab-shell,.lab-shell body{overflow-x:clip}
.lab-shell body{
  background:var(--ground); color:var(--text);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.lab-shell h1,.lab-shell h2,.lab-shell h3{margin:0;font-family:var(--disp);font-weight:600}
.lab-shell button,.lab-shell input,.lab-shell textarea,.lab-shell select{font:inherit;color:inherit}

/* ---------- structural ---------- */
.lab-shell .wrap{max-width:1500px;margin:0 auto;padding:0 14px 40px}
.lab-shell header{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 0 8px;border-bottom:1px solid var(--rule);
  /* Locked to the top. Solid background: content scrolls under it. */
  position:sticky;top:0;z-index:50;background:var(--ground);
}
.lab-shell .brand{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--bright);white-space:nowrap}
.lab-shell .brand em{font-style:normal;color:var(--glow);transition:color .18s}
.lab-shell .themebtn{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;cursor:pointer;color:var(--dim);
  background:var(--panel);border:1px solid var(--rule);border-radius:2px;
}
.lab-shell .themebtn:hover{color:var(--bright);border-color:var(--glow)}
.lab-shell .themebtn.ok{color:var(--ground);background:var(--alu);border-color:var(--alu)}
.lab-shell #linkurl{font-size:11.5px;color:var(--dim)}
.lab-shell #linkpanel .atform{margin-top:8px}
.lab-shell .themebtn .ic{width:15px;height:15px}
@media(max-width:860px){.lab-shell .themebtn{margin-left:auto}}
@media(max-width:860px){}
.lab-shell .panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-hair)}
.lab-shell .panel > .ph{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px 12px;
  flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--rule);
  /* Two lines are ALLOCATED, not merely allowed: the headings are of very
     different lengths and a row that grows when you switch to a longer one
     moves the whole panel down under the reader. Two lines of the eyebrow's
     own line-height, plus the padding. */
  min-height:calc(2 * 1.45em + 16px);
}
.lab-shell .panel > .ph > .eyebrow{line-height:1.45}
.lab-shell .panel > .ph > h2{flex:1 1 12rem;min-width:0}
.lab-shell .panel > .ph > .eyebrow:not(h2){flex:0 1 auto;text-align:right}
/* On a phone the two of them cannot share a row: measured, the headings
   land on 57px or 69px depending on which tab is open, so the panel under
   them moves. The status gets a row of its own and the heading the full
   width, which is a steady three lines whatever is in them. */
@media(max-width:620px){
  .lab-shell .panel > .ph{
    flex-direction:column;align-items:stretch;gap:2px;
    min-height:calc(3 * 1.45em + 16px);
  }
  .lab-shell .panel > .ph > h2{flex:none}
  .lab-shell .panel > .ph > .eyebrow:not(h2){text-align:left}
}
.lab-shell .panel > .pb{padding:12px}
.lab-shell .panel + .panel{margin-top:12px}

/* ---------- clock badge ---------- */

/* Tabular digits and a reserved width: the counter grows h 0 -> h 9999
   without moving anything beside it. Same for the scrubber label; a header
   that jumps on every half-cycle is unreadable. */
.lab-shell .pos{font-family:var(--mono);font-size:11.5px;color:var(--mid);white-space:nowrap;
     font-variant-numeric:tabular-nums;min-width:15ch;text-align:right}
.lab-shell .pos b{color:var(--bright);font-weight:600}

/* ---------- player (sticky, top) ---------- */
/* The transport is the footer: locked to the bottom at every width, so
   the controls are reachable however deep a tab scrolls. The body reserves
   its height (more on a phone, where the row wraps to two lines), and the
   safe-area inset keeps it clear of a home indicator. */
.lab-shell .player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:8px max(14px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right));
  background:color-mix(in srgb,var(--ground) 96%,#000);
  border-top:1px solid var(--rule);backdrop-filter:blur(8px);
}
.lab-shell body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
.lab-shell .prow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lab-shell .tbtn{
  background:var(--panel);border:1px solid var(--rule);border-radius:2px;
  padding:6px 9px;font-family:var(--mono);font-size:11.5px;cursor:pointer;color:var(--mid);
  min-height:32px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
}
/* Every icon on the page is this one shape: a 24-unit outline stroked in
   the control's own colour, so it hovers and disables with the control. */
.lab-shell .ic{
  width:14px;height:14px;flex:none;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Power is a latch, not a shot, so it is drawn as a switch rather than as a
   stepper: filled while the chip has power, hollow while it does not. It is
   the only filled control on the page, which is the whole point -- it is
   also the only one that can throw a recording away. */
.lab-shell .tbtn.pw{color:var(--ground);background:var(--power);border-color:var(--power);font-weight:600}
.lab-shell .tbtn.pw:hover:not(:disabled){color:var(--ground);background:color-mix(in srgb,var(--power) 84%,var(--bright));border-color:color-mix(in srgb,var(--power) 84%,var(--bright))}
.lab-shell .tbtn.pw.off{color:var(--power);background:transparent}
.lab-shell .tbtn.pw.off:hover:not(:disabled){color:var(--ground);background:var(--power)}
/* A hero control that is working has to stay legible: .35 reads as broken. */
.lab-shell .tbtn.pw:disabled{opacity:.75}
.lab-shell .tbtn.pw.busy{animation:pwpulse 1.1s ease-in-out infinite}
@keyframes pwpulse{0%,100%{opacity:.75}50%{opacity:.3}}
/* On a phone the four steppers keep only their icon: a chevron either way,
   a double chevron and a chevron-to-a-bar say what "½ / cyc / op" said, and
   the row goes from four wrapped lines to two. Power, start and play keep
   their words, because no icon distinguishes a power cycle from a rewind
   to somebody who has not read the caption. */
@media(max-width:26rem){
  .lab-shell #b-hb .lb,.lab-shell #b-hf .lb,.lab-shell #b-cf .lb,.lab-shell #b-if .lb{display:none}
  .lab-shell .tbtn{padding:6px 8px}
}
.lab-shell .tbtn:hover:not(:disabled){color:var(--bright);border-color:var(--glow)}
.lab-shell .tbtn:disabled{opacity:.35;cursor:not-allowed}
.lab-shell .tbtn.play{min-width:62px;color:var(--bright)}
/* Powered off, the page must not go on showing values as though they were
   live. The state surfaces go inert and grey; the Program tab does not,
   because editing the source is the one useful thing to do while the chip
   is off, and the next power-on is what assembles it. */
.lab-shell body.off .scopewrap,
.lab-shell body.off .tabwrap section[role="tabpanel"]:not(#p-prog){
  opacity:.22;filter:grayscale(.85);pointer-events:none;
}
/* Anything on screen that names a node on the die is clickable, and says so
   quietly: the readouts are the page and the affordance must not compete
   with them. */
.lab-shell .tagged{cursor:pointer}
.lab-shell .bx.tagged rect{transition:stroke .12s}
.lab-shell .bx.tagged:hover rect{stroke:var(--bright)}
.lab-shell .bl.tagged:hover{background:var(--hover)}
.lab-shell .ln.tagged:hover{color:var(--bright)}
.lab-shell .bx.sel rect,.lab-shell .bl.sel{outline:1.5px solid var(--alu);outline-offset:1px}
.lab-shell .ln.sel{color:var(--alu)}

/* The inspector: what the thing you just clicked is part of. Sits between
   the scope and the tabs, so one panel serves every tab rather than each
   tab growing its own copy. */
.lab-shell .insp{margin-bottom:12px;border-color:var(--alu)}
.lab-shell .insp .ph{align-items:center}
.lab-shell .insp .pb{padding:10px 12px}
.lab-shell .ig{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.lab-shell .ig{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.lab-shell .icard{border:1px solid var(--rule);border-radius:var(--radius-hair);padding:8px 10px;background:var(--panel2)}
.lab-shell .icard + .icard{margin-top:8px}
.lab-shell .ikey{font-family:var(--mono);font-size:12px;color:var(--bright);font-weight:600}
.lab-shell .ilab{font-size:12px;color:var(--mid)}
.lab-shell .imeta{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.5}
.lab-shell .imeta b{color:var(--mid);font-weight:500}
.lab-shell .ipills{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.lab-shell .ipill{font-family:var(--mono);font-size:10.5px;border:1px solid var(--rule);border-radius:2px;
  padding:1px 5px;color:var(--dim);background:var(--cell)}
.lab-shell .ipill.hi{color:var(--ground);background:var(--alu);border-color:var(--alu)}
.lab-shell .ipill.lo{color:var(--mid)}
.lab-shell .ipill.chg{box-shadow:0 0 0 1.5px var(--glow)}
.lab-shell .iwatch{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.lab-shell .ibtn{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:2px;cursor:pointer;
  background:var(--panel);border:1px solid var(--rule);color:var(--mid);white-space:nowrap}
.lab-shell .ibtn:hover:not(:disabled){color:var(--bright);border-color:var(--glow)}
.lab-shell .ibtn:disabled{opacity:.45;cursor:not-allowed}
.lab-shell .ibtn.on{color:var(--ground);background:var(--alu);border-color:var(--alu)}
.lab-shell .inote{font-size:11.5px;color:var(--dim);margin-top:8px;line-height:1.5}
.lab-shell .iclose{background:none;border:0;color:var(--dim);cursor:pointer;padding:2px 4px;line-height:1}
.lab-shell .iclose:hover{color:var(--bright)}
.lab-shell .wrow{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.lab-shell .wrow .ikey{flex:0 0 auto}
.lab-shell .wrow.stack{margin-top:6px}
.lab-shell .idim{color:var(--dim)}
/* The Atlas tab: three panes, one file. Each pane scrolls inside its own box
   so the page never grows a second scrollbar and the three stay level. */
.lab-shell .atgrid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.lab-shell .atgrid{grid-template-columns:minmax(0,4fr) minmax(0,5fr)}}
@media(min-width:1180px){.lab-shell .atgrid{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr)}}
.lab-shell .atcol{min-width:0;display:flex;flex-direction:column}
.lab-shell .atlab{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px}
.lab-shell .atscroll{border:1px solid var(--rule);border-radius:var(--radius-hair);background:var(--sunk);
  padding:8px;overflow-y:auto;max-height:min(70vh,620px);flex:1 1 auto;min-height:120px}
.lab-shell .atk,.lab-shell .atg{display:flex;gap:7px;align-items:baseline;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-radius:2px;padding:4px 6px;color:inherit}
.lab-shell .atk:hover,.lab-shell .atg:hover{background:var(--hover)}
.lab-shell .atk.on{background:var(--cell);color:var(--bright)}
.lab-shell .atg.on{background:var(--alu);color:var(--ground)}
.lab-shell .atg.on .ikey,.lab-shell .atg.on .ilab,.lab-shell .atg.on .atn{color:var(--ground)}
.lab-shell .atgroups{margin:2px 0 6px 12px;border-left:1px solid var(--rule);padding-left:6px}
.lab-shell .atn{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim);flex:0 0 auto}
.lab-shell .atform{display:flex;gap:6px;margin-bottom:6px}
.lab-shell .atform input{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:16px;padding:4px 7px;
  background:var(--sunk);border:1px solid var(--rule);border-radius:2px;color:var(--text)}
.lab-shell .ilink{font-family:var(--mono);font-size:11px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--addr);border-bottom:1px dotted currentColor}
.lab-shell .ilink:hover{color:var(--bright)}
.lab-shell .ilink.dim{color:var(--dim);font-size:10.5px}
.lab-shell .ilink.own{color:var(--alu)}
.lab-shell .ipill.link{cursor:pointer}
.lab-shell .ipill.link:hover{border-color:var(--glow);color:var(--bright)}
.lab-shell .ipill.link.hi:hover{color:var(--ground)}
.lab-shell .iarrow{font-family:var(--mono);color:var(--mid);flex:0 0 auto}
.lab-shell .iarrow.pass{color:var(--addr)}
.lab-shell .inote.lede0{margin-top:0}

/* The diff. A row is name, was, arrow, now, and the bits that flipped; the
   columns are a grid so the arrows line up down the page rather than sliding
   about with the width of a label. */
.lab-shell .dbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:8px}
.lab-shell .dhead{font-family:var(--mono);font-size:12px;color:var(--mid);flex:1 1 14rem;min-width:0}
.lab-shell .dhead b{color:var(--bright);font-weight:600}
.lab-shell .dctl{display:flex;gap:6px;flex:0 0 auto}
.lab-shell .dsec{margin-top:10px;border:1px solid var(--rule);border-radius:var(--radius-hair);background:var(--panel2);
  padding:6px 9px 8px}
.lab-shell .dsech{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--dim);
  text-transform:uppercase;margin-bottom:4px}
.lab-shell .drow{display:grid;gap:4px 8px;align-items:center;padding:2px 0;
  grid-template-columns:5.5rem 3.6rem .8rem 3.6rem minmax(0,1fr)}
/* A flag's value is a WORD ("write", "none", "T0+T2"), so its columns have to
   give rather than clip: fixed 5rem tracks overflowed the row by 19px at
   320px. And a memory row has THREE children, not five, so it needs its own
   template or the "at h 66" lands in the 0.8rem arrow column and hangs 33px
   out of it. Both measured, at 320 and at 390. */
.lab-shell .drow.flag{grid-template-columns:5.5rem minmax(0,1fr) .8rem minmax(0,1fr)}
.lab-shell .drow.mem{grid-template-columns:5.5rem 4rem minmax(0,1fr)}
.lab-shell .drow.wide{grid-template-columns:5.5rem minmax(0,1fr)}
@media(max-width:520px){
  .lab-shell .drow{grid-template-columns:4.6rem 3.2rem .7rem 3.2rem;row-gap:2px}
  .lab-shell .dbits{grid-column:1/-1}
  .lab-shell .drow.flag{grid-template-columns:4.6rem minmax(0,1fr) .7rem minmax(0,1fr)}
  .lab-shell .drow.mem{grid-template-columns:4.6rem 3.6rem minmax(0,1fr)}
  .lab-shell .drow.wide{grid-template-columns:minmax(0,1fr)}
}
.lab-shell .dn{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.05em;
  min-width:0;overflow-wrap:anywhere}
.lab-shell .dv,.lab-shell .dmore{min-width:0;overflow-wrap:anywhere}
.lab-shell .dv{font-family:var(--mono);font-size:12px;font-weight:600}
.lab-shell .dv.was{color:var(--dim)}
.lab-shell .dv.now{color:var(--bright)}
.lab-shell .darr{color:var(--dim);font-size:11px;text-align:center}
.lab-shell .drow.addr .dv.now{color:var(--addr)}
.lab-shell .drow.data .dv.now{color:var(--data)}
.lab-shell .drow.alu .dv.now{color:var(--alu)}
.lab-shell .dbits{display:flex;gap:1.5px;flex-wrap:nowrap}
.lab-shell .dbc{width:7px;height:12px;border-radius:1px;background:var(--cell);border:1px solid var(--cellrule)}
.lab-shell .dbc.on{background:var(--mid);border-color:var(--mid)}
.lab-shell .dbc.flip{box-shadow:0 0 0 1.5px var(--glow)}
.lab-shell .dgap{width:5px}
.lab-shell .dpills{display:flex;flex-wrap:wrap;gap:3px}
.lab-shell .dpill{font-family:var(--mono);font-size:10px;border-radius:2px;padding:1px 5px;cursor:pointer;
  border:1px solid var(--rule);background:var(--cell);color:var(--mid)}
.lab-shell .dpill.up{color:var(--ground);background:var(--alu);border-color:var(--alu)}
.lab-shell .dpill.down{color:var(--dim)}
.lab-shell .dpill:hover{border-color:var(--glow)}
.lab-shell .dmore{font-size:10.5px;color:var(--dim);font-family:var(--mono)}
.lab-shell .offnote{border-color:var(--power);margin-bottom:12px}
.lab-shell .offnote .pb{font-size:12.5px;color:var(--mid);line-height:1.55}
.lab-shell .offnote b{color:var(--power);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.lab-shell #scrub{flex:1 1 140px;min-width:110px;accent-color:var(--glow);height:26px}
.lab-shell .rate{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.lab-shell #rate{width:80px;accent-color:var(--glow);height:26px}
.lab-shell #ratelab{min-width:5ch;text-align:left}
.lab-shell .strip{width:100%;height:20px;display:block;background:var(--panel2);border:1px solid var(--rule);border-radius:2px;cursor:pointer;margin-top:6px}
.lab-shell .tlab{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:9ch;text-align:right}

/* ---------- instruction lane + scope ---------- */
.lab-shell .scopewrap{margin-top:10px;overflow:hidden}
.lab-shell .lane{
  display:flex;gap:5px;padding:7px 8px;overflow-x:auto;
  border-bottom:1px solid var(--rule);background:var(--panel2);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.lab-shell .ins{flex:0 0 auto;border:1px solid var(--rule);border-radius:2px;background:var(--lane);padding:3px 4px 4px}
.lab-shell .ins.here{border-color:var(--glow);background:color-mix(in srgb,var(--glow) 10%,var(--lane))}
.lab-shell .ins .il{
  font-family:var(--mono);font-size:10px;color:var(--dim);
  padding:0 2px 3px;white-space:nowrap;letter-spacing:-.01em;
  display:block;width:100%;text-align:left;background:none;border:none;
  cursor:pointer;line-height:1.3;
}
.lab-shell .ins .il:hover{color:var(--bright)}
.lab-shell .ins .il:focus-visible{outline:1px solid var(--glow);outline-offset:1px}
.lab-shell .ins.here .il{color:var(--bright)}
.lab-shell .ins .cells{display:flex;gap:2px}
.lab-shell .cell{
  width:9px;height:13px;border-radius:1px;background:var(--cell2);cursor:pointer;border:none;padding:0;
}
.lab-shell .cell.ph2{background:var(--cell3)}
.lab-shell .cell.wr{background:var(--data);opacity:.55}
.lab-shell .cell.now{background:var(--glow)}
.lab-shell #scope{display:block;width:100%;height:auto;background:var(--sunk);touch-action:none;cursor:ew-resize}
/* The scope, collapsible: the strip is the whole waveform display folded to
   one line, a shaded box per channel at the current half-cycle. High fills
   in the channel's colour, low is the empty outline, unknown (no trace, or
   a channel the packed demo lacks) is a dashed grey box. */
.lab-shell .scopebar{display:flex;align-items:flex-end;gap:8px;padding:3px 8px;background:var(--panel2);border-bottom:1px solid var(--rule)}
.lab-shell .scopebar .pos{align-self:center;flex:none;margin-right:auto}
.lab-shell .scopetgl{
  margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:var(--dim);
  background:none;border:1px solid var(--rule);border-radius:2px;padding:2px 7px;cursor:pointer;
}
.lab-shell .scopetgl:hover{color:var(--text);border-color:var(--mid)}
.lab-shell .scopetgl{display:inline-flex;align-items:center;gap:4px}
.lab-shell .scopetgl .ic{width:12px;height:12px}
.lab-shell .scopestrip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:2px 0;flex:1;justify-content:flex-end}
.lab-shell .sch{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10px;white-space:nowrap}
.lab-shell .sbox{width:11px;height:12px;border-radius:1px;border:1px solid currentColor;background:none;opacity:.55}
.lab-shell .sbox.hi{background:currentColor;opacity:1}
.lab-shell .sbox.unk{border-style:dashed;border-color:var(--rule);opacity:1}
.lab-shell .scopewrap.folded #scope{display:none}
.lab-shell .scopewrap.folded .scopebar{border-bottom:none}

/* ---------- tabs ---------- */
/* The menu sits in the header, on its own row under the wordmark: it is
   navigation, so it belongs with the chrome rather than sitting on top of
   the panel it opens. flex-basis 100% is what puts it on the second row of
   a wrapping header without a second container. */
.lab-shell .tabs{
  flex:1 0 100%;display:flex;gap:1px;margin:2px -4px -8px;padding:0 4px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.lab-shell .tabs::-webkit-scrollbar{display:none}
.lab-shell .tab{
  flex:0 0 auto;background:transparent;border:none;
  border-bottom:1px solid transparent;
  padding:7px 10px 6px;cursor:pointer;
  font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);min-height:32px;white-space:nowrap;
}
.lab-shell .tab:hover{color:var(--text)}
.lab-shell .tab[aria-selected="true"]{color:var(--bright);border-bottom-color:var(--glow)}
.lab-shell .tab:focus-visible{outline:1px solid var(--glow);outline-offset:-2px}
.lab-shell .tabwrap{padding-top:12px}
.lab-shell [role="tabpanel"][hidden]{display:none}
.lab-shell .two{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:1000px){.lab-shell .two{grid-template-columns:1fr 300px}}

/* ---------- editor rail ---------- */
.lab-shell textarea#src{
  width:100%;min-height:214px;resize:vertical;background:var(--panel2);
  border:1px solid var(--rule);border-radius:2px;padding:10px;
  font-family:var(--mono);font-size:12.5px;line-height:1.62;color:var(--text);
  tab-size:8;white-space:pre;overflow-x:auto;
}
.lab-shell textarea#src:focus,.lab-shell select:focus,.lab-shell button:focus-visible,.lab-shell input:focus{outline:2px solid var(--glow);outline-offset:1px}
.lab-shell select{
  width:100%;background:var(--panel2);border:1px solid var(--rule);border-radius:2px;
  padding:7px 9px;font-family:var(--mono);font-size:12px;
}
.lab-shell .btn:hover:not(:disabled){border-color:var(--glow);color:var(--bright)}
.lab-shell .btn:disabled{opacity:.38;cursor:not-allowed}
.lab-shell .btn.go{background:color-mix(in srgb,var(--addr) 16%,var(--panel2));border-color:color-mix(in srgb,var(--addr) 50%,var(--rule));color:var(--bright)}
.lab-shell .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.lab-shell .note{font-size:12px;color:var(--dim);margin:9px 0 0;line-height:1.5}
.lab-shell .err{font-family:var(--mono);font-size:11.5px;color:var(--data);margin-top:9px;white-space:pre-wrap}

/* ---------- datapath stage ---------- */
.lab-shell .stage{border-top:1px solid var(--glow);transition:border-color .18s}
.lab-shell .mapwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* The diagrams FIT their container at every width: the viewBox scales
   them down rather than scrolling them sideways. */
.lab-shell #map,.lab-shell #lmap{display:block;width:100%;max-width:860px;margin:0 auto;height:auto}
.lab-shell .bx rect{fill:var(--panel2);stroke:var(--rule);stroke-width:1}
.lab-shell .bx text.n{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.08em;fill:var(--mid)}
.lab-shell .bx text.v{font-family:var(--mono);font-size:12.5px;font-weight:600;fill:var(--dim)}
.lab-shell .bx.hot rect{stroke:var(--bright);fill:var(--hotfill)}
.lab-shell .bx.hot text.v{fill:var(--bright)}
.lab-shell .bx.bus rect{fill:var(--lane)}
.lab-shell .bx.stale rect{stroke-dasharray:4 3;stroke:var(--dim)}
.lab-shell .bx.stale text.v{fill:var(--dim)}
.lab-shell .bx.bus text.n{font-size:9.5px}
/* A latch that took a value at this edge fills solid in its own colour, so
   the diagram answers "what moved" without reading a single byte. The datapath
   map keeps the tint: `hot` means a control line is conducting there, which is
   a claim about a wire rather than about storage. */
.lab-shell #lmap .bx.hot rect{fill:var(--mid);stroke:var(--mid)}
.lab-shell #lmap .bx.k-addr.hot rect{fill:var(--addr);stroke:var(--addr)}
.lab-shell #lmap .bx.k-data.hot rect{fill:var(--data);stroke:var(--data)}
.lab-shell #lmap .bx.k-alu.hot rect{fill:var(--alu);stroke:var(--alu)}
.lab-shell #lmap .bx.hot text.n,.lab-shell #lmap .bx.hot text.v{fill:var(--ground)}
.lab-shell .e{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2;opacity:.11}
.lab-shell .e.addr{stroke:var(--addr)} .lab-shell .e.data{stroke:var(--data)} .lab-shell .e.alu{stroke:var(--alu)}
.lab-shell .e.struct{opacity:.3}
.lab-shell .e.on{opacity:1;stroke-width:2.6;stroke-dasharray:7 5;animation:flow .7s linear infinite}
.lab-shell .e.head{stroke-width:1.4}
.lab-shell .e.head.on{stroke-width:2.2;stroke-dasharray:none;animation:none}
@keyframes flow{to{stroke-dashoffset:-24}}
.lab-shell .elab{font-family:var(--mono);font-size:8.5px;fill:var(--dim);opacity:0;letter-spacing:.02em}
.lab-shell .elab.on{opacity:.95}

/* ---------- stage ---------- */
@media(min-width:1060px){
  .lab-shell .mapwrap{display:flex;align-items:center;justify-content:center}
  .lab-shell #map,.lab-shell #lmap{max-width:none;min-width:0;width:100%;height:min(46vh,460px)}
}

/* ---------- readout strip ---------- */
.lab-shell .readout{
  display:flex;flex-wrap:wrap;gap:5px;padding:9px 12px;
  border-top:1px solid var(--rule);background:var(--foot);
}
.lab-shell .rd{
  font-family:var(--mono);font-size:11.5px;padding:3px 7px;border-radius:2px;
  border:1px solid var(--rule);background:var(--panel2);color:var(--dim);white-space:nowrap;
}
.lab-shell .rd b{font-weight:600;color:var(--text);margin-left:5px}
.lab-shell .rd.chg{border-color:var(--glow)}
.lab-shell .rd.chg b{color:var(--bright)}
.lab-shell .rd.addr{color:var(--addr)} .lab-shell .rd.data{color:var(--data)} .lab-shell .rd.alu{color:var(--alu)}

/* ---------- bit lanes ---------- */
.lab-shell .bitgrid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
@media(min-width:980px){.lab-shell .bitgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lab-shell .bsecbox{
  border:1px solid var(--rule);border-radius:var(--radius-hair);background:var(--panel2);
  padding:7px 9px 8px;display:grid;gap:2px;align-content:start;min-width:0;
}
/* A lane may wrap: a 16-bit value stacks into its two bytes, and a tag
   that will not fit beside the hex drops to a line of its own. Without
   this the two sections holding a 16-bit lane had to span the whole grid,
   which is what made the desktop layout two full-width rows and a tiled
   remainder instead of one uniform grid. */
.lab-shell .bl{flex-wrap:wrap}
.lab-shell .bl.w16 .bits{flex-wrap:wrap;width:102px}
.lab-shell .bl.w16 .bits .gap{flex:1 0 100%;width:auto;height:2px}
.lab-shell .bsec{
  font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);padding:0 0 4px;
}
.lab-shell .bl{display:flex;align-items:center;gap:8px;min-height:19px;min-width:0}
/* The pins are a 2x2 of badges rather than a run of four: as a row they
   were the widest thing on the tab and set the width of every column. */
.lab-shell .ptags{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:3px 5px;justify-content:start}
.lab-shell .ptags .btag{text-align:center}
.lab-shell .bn{
  font-family:var(--mono);font-size:10.5px;color:var(--mid);
  width:46px;flex:none;text-align:right;
}
.lab-shell .bits{display:flex;gap:2px}
.lab-shell .bits .gap{width:6px}
.lab-shell .bc{
  width:11px;height:15px;border-radius:1px;
  background:var(--cell);border:1px solid var(--cellrule);
}
.lab-shell .bc.on{background:currentColor;border-color:currentColor}
.lab-shell .bc.flip{box-shadow:0 0 0 1.5px var(--glow)}
.lab-shell .bh{font-family:var(--mono);font-size:11px;color:var(--text);width:46px;flex:none}
.lab-shell .btag{
  font-family:var(--mono);font-size:9.5px;padding:1px 5px;border-radius:2px;
  border:1px solid currentColor;opacity:.9;white-space:nowrap;
}
.lab-shell .bl.addr{color:var(--addr)} .lab-shell .bl.data{color:var(--data)}
.lab-shell .bl.alu{color:var(--alu)}  .lab-shell .bl.rg{color:var(--reg)}
.lab-shell .bl.idle{opacity:.42}
/* Two columns on a phone, and the lane goes vertical to make room for
   them. Measured first: side by side, name + eight cells + hex needs 158px
   against the 141 a half column has at 390px, and shrinking the pieces to
   fit lands exactly on the limit at one width and over it at the next. So
   the lane stacks instead -- name and value on one line, the bits under
   them -- which needs only the 78px the cells occupy and fits at every
   phone width with room to spare. */
@media(max-width:620px){
  .lab-shell body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .lab-shell .bc{width:8px;height:13px}
  .lab-shell .bitgrid{gap:7px}
  .lab-shell .bsecbox{padding:6px 7px 7px}
  .lab-shell .bl{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 6px;
    align-items:center;min-height:0;padding:2px 0;
  }
  .lab-shell .bl + .bl{border-top:1px solid var(--cell)}
  .lab-shell .bn{width:auto;text-align:left;font-size:9.5px}
  .lab-shell .bh{width:auto;text-align:right;font-size:10px}
  .lab-shell .bits{grid-column:1/-1;padding-top:1px}
  .lab-shell .btag{grid-column:1/-1;justify-self:start;margin-top:2px}
  /* the cells are smaller here, so the stacked byte is narrower */
  .lab-shell .bl.w16 .bits{width:78px}
  .lab-shell .bl.pins{display:block}
  .lab-shell .bl.pins .bn{display:block;padding-bottom:3px}
}
@media(max-width:420px){
  /* Two badges side by side are wider than a half column at 320px. */
  .lab-shell .ptags{grid-template-columns:minmax(0,1fr)}
}

/* ---------- timeline, decode, memory ---------- */
.lab-shell #tl,.lab-shell #memtime{display:block;width:100%;background:var(--sunk)}
.lab-shell .tlnote{font-family:var(--mono);font-size:10px;color:var(--dim);padding:7px 12px}
.lab-shell .decgrid{display:flex;gap:14px;flex-wrap:wrap;padding:4px 0}
.lab-shell .decstage{min-width:70px}
.lab-shell .dechead{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--dim);padding-bottom:4px}
.lab-shell .decbeads{display:grid;grid-template-columns:repeat(6,12px);gap:3px}
.lab-shell .bead{width:12px;height:12px;border-radius:2px;background:var(--cell);border:1px solid var(--cellrule);padding:0;cursor:default}
.lab-shell .bead.on{background:var(--alu);border-color:var(--alu);box-shadow:0 0 6px color-mix(in srgb,var(--alu) 60%,transparent)}
.lab-shell .decfire{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px}
.lab-shell .decfire .ln{cursor:default}
.lab-shell #memmap{display:grid;gap:10px}
.lab-shell .mrow .ma{font-family:var(--mono);font-size:10px;color:var(--dim);padding-bottom:3px}
.lab-shell .mcells{display:grid;grid-template-columns:repeat(64,1fr);gap:1px}
.lab-shell .mc{aspect-ratio:1;background:var(--mcell);border-radius:1px}
.lab-shell .mc.rd{background:color-mix(in srgb,var(--addr) 45%,var(--mcell))}
.lab-shell .mc.wr{background:color-mix(in srgb,var(--data) 55%,var(--mcell))}
.lab-shell .mc.now{outline:1.5px solid var(--glow);outline-offset:-1px}

/* ---------- interrupts ---------- */
.lab-shell .pinrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-bottom:10px}
.lab-shell .pinbtn{
  font-family:var(--mono);font-size:11px;padding:5px 10px;border-radius:2px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--rule);color:var(--text);
  display:inline-flex;align-items:center;gap:5px;
}
.lab-shell .pinbtn:hover:not(:disabled){border-color:var(--glow);color:var(--bright)}
.lab-shell .pinbtn:disabled{opacity:.45;cursor:default}
.lab-shell .pinstate{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.lab-shell .pinstate i{width:9px;height:9px;border-radius:50%;background:var(--rule);display:inline-block}
.lab-shell .pinstate.hi i{background:var(--teal)} .lab-shell .pinstate.lo i{background:var(--data);box-shadow:0 0 7px var(--data)}
.lab-shell .seq{font-family:var(--mono);font-size:11px;line-height:1.85;overflow-x:auto}
.lab-shell .seq .r{display:flex;gap:10px;white-space:nowrap;cursor:pointer;border-radius:2px;padding:0 4px}
.lab-shell .seq .r:hover{background:var(--hover)}
.lab-shell .seq .r.now{background:color-mix(in srgb,var(--glow) 16%,transparent)}
.lab-shell .seq .h{color:var(--dim);width:34px;flex:none;text-align:right}
.lab-shell .seq .w{width:118px;flex:none}
.lab-shell .seq .w.wr{color:var(--data)} .lab-shell .seq .w.rd{color:var(--addr)}
.lab-shell .seq .d{color:var(--mid)}
.lab-shell .seq .r.key .d{color:var(--bright)}

/* ---------- adder & stack ---------- */
.lab-shell .addgrid{display:grid;grid-template-columns:56px repeat(8,minmax(26px,40px));gap:3px;align-items:center;font-family:var(--mono);font-size:10px}
.lab-shell .addgrid .rl{color:var(--dim);text-align:right;padding-right:6px}
.lab-shell .addgrid .hd{color:var(--dim);text-align:center;padding-bottom:2px}
.lab-shell .acell{height:20px;border-radius:2px;background:var(--cell);border:1px solid var(--cellrule);display:flex;align-items:center;justify-content:center;color:var(--dim)}
.lab-shell .acell.on{background:currentColor;border-color:currentColor}
.lab-shell .acell.on::after{content:"1";color:var(--ground);font-weight:700}
.lab-shell .acell:not(.on)::after{content:"0"}
.lab-shell .acell.arow-a.on{color:var(--addr)} .lab-shell .acell.arow-b.on{color:var(--data)}
.lab-shell .acell.arow-c{height:14px;border-style:dashed}
.lab-shell .acell.arow-c.on{color:var(--alu);border-style:solid}
.lab-shell .acell.arow-s.on{color:var(--alu)}
.lab-shell .addeq{font-family:var(--mono);font-size:12px;color:var(--text);padding:8px 0 0;margin:0}
.lab-shell .addeq .sep{color:var(--dim);padding:0 2px}
.lab-shell .addeq b{color:var(--bright)}
.lab-shell .stkrow{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11.5px;min-height:20px}
.lab-shell .stkrow .a{color:var(--dim)}
.lab-shell .stkrow b{color:var(--text);font-weight:400}
.lab-shell .stkrow.wrote b{color:var(--data);font-weight:600}
.lab-shell .stkrow.sp .a{color:var(--glow)}
.lab-shell .stkrow .tag{font-size:9.5px;border:1px solid currentColor;border-radius:2px;padding:0 5px;color:var(--glow);white-space:nowrap}
.lab-shell .stkrow.now b{outline:1.5px solid var(--glow);outline-offset:2px}

/* ---------- narration ---------- */
.lab-shell .tell{padding:14px 16px;border-top:1px solid var(--rule);background:var(--panel2)}
.lab-shell .tell .lede{font-size:15.5px;line-height:1.55;color:var(--bright);margin:0}
.lab-shell .tell .lede b{color:var(--glow);font-weight:500}
.lab-shell .tell ul{margin:11px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.lab-shell .tell li{font-size:13.5px;color:var(--mid);padding-left:15px;position:relative;line-height:1.5}
.lab-shell .tell li:before{content:"";position:absolute;left:0;top:.58em;width:6px;height:1.5px;background:var(--dim)}
.lab-shell .tell li.k:before{background:var(--glow);height:2px}
.lab-shell .tell li.k{color:var(--text)}
.lab-shell .tell code{font-family:var(--mono);font-size:12.5px;color:var(--bright);background:var(--code);padding:1px 4px;border-radius:2px}
/* The block list leads with the block's name, so the reader can find the
   one they came for without reading the sentence first. */
.lab-shell .tell ul.bw{gap:9px}
.lab-shell .tell ul.bw li > b.bwl{
  font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);display:block;padding-bottom:1px;
}
.lab-shell .tell ul.bw li.k > b.bwl{color:var(--glow)}
.lab-shell .tell ul.bw li b:not(.bwl){color:var(--text);font-weight:600}

/* ---------- control-line grid ---------- */
.lab-shell .lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:5px}
.lab-shell .ln{
  display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:2px;
  border:1px solid var(--rule);background:var(--panel2);
  font-family:var(--mono);font-size:10.5px;color:var(--dim);
}
.lab-shell .ln i{width:6px;height:6px;border-radius:1px;background:var(--rule);flex:none;font-style:normal}
.lab-shell .ln.on{color:var(--bright);border-color:currentColor;background:var(--onbg)}
.lab-shell .ln.on i{background:currentColor}
.lab-shell .ln.addr.on{color:var(--addr)} .lab-shell .ln.data.on{color:var(--data)} .lab-shell .ln.alu.on{color:var(--alu)}

/* ---------- registers / memory side ---------- */
.lab-shell .regs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media(min-width:620px){.lab-shell .regs{grid-template-columns:repeat(4,1fr)}.lab-shell .reg.wide{grid-column:span 2}}
.lab-shell .reg{background:var(--panel2);border:1px solid var(--rule);border-radius:2px;padding:7px 9px}
.lab-shell .reg .k{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--dim)}
.lab-shell .reg .v{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text);margin-top:1px}
.lab-shell .reg.wide{grid-column:span 2}
.lab-shell .reg.chg{border-color:var(--glow);background:color-mix(in srgb,var(--glow) 13%,var(--panel2))}
.lab-shell .reg.chg .v{color:var(--bright)}
.lab-shell .flags{font-family:var(--mono);font-size:15px;letter-spacing:.15em;margin-top:1px}
.lab-shell .flags span{color:var(--faint)}
.lab-shell .flags span.set{color:var(--alu)}
.lab-shell .mem{font-family:var(--mono);font-size:11px;line-height:1.75;overflow-x:auto;white-space:nowrap}
.lab-shell .mem .a{color:var(--dim)}
.lab-shell .mem b{font-weight:400;color:var(--text)}
.lab-shell .mem b.w{color:var(--data);font-weight:600}
.lab-shell .mem b.z{color:var(--faint)}
.lab-shell .lline{padding:1px 4px;border-left:1px solid transparent;border-radius:2px}
.lab-shell .lline.here{border-left-color:var(--glow);background:color-mix(in srgb,var(--glow) 14%,transparent)}
.lab-shell .lline.here b,.lab-shell .lline.here{color:var(--bright)}

.lab-shell .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.lab-shell .e.on{animation:none}.lab-shell *{transition:none!important}}