/* Code fonts (classroom 2026-11-03): five bundled OFL fonts, Latin subset;
   Chinese text in comments falls back to the system font. A font file is
   only fetched once text uses it. */
@font-face { font-family: "JetBrains Mono Web"; src: url("fonts/jetbrains-mono/400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono Web"; src: url("fonts/jetbrains-mono/400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono Web"; src: url("fonts/jetbrains-mono/600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono Web"; src: url("fonts/jetbrains-mono/600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Fira Code Web"; src: url("fonts/fira-code/400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code Web"; src: url("fonts/fira-code/600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cascadia Code Web"; src: url("fonts/cascadia-code/400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cascadia Code Web"; src: url("fonts/cascadia-code/400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cascadia Code Web"; src: url("fonts/cascadia-code/600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cascadia Code Web"; src: url("fonts/cascadia-code/600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Code Pro Web"; src: url("fonts/source-code-pro/400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Code Pro Web"; src: url("fonts/source-code-pro/400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Code Pro Web"; src: url("fonts/source-code-pro/600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Code Pro Web"; src: url("fonts/source-code-pro/600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono Web"; src: url("fonts/ibm-plex-mono/400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono Web"; src: url("fonts/ibm-plex-mono/400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono Web"; src: url("fonts/ibm-plex-mono/600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono Web"; src: url("fonts/ibm-plex-mono/600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
:root {
  --bg: #f3f5f8;
  --panel: #fff;
  --text: #26344a;
  --muted: #7d889b;
  --line: #e3e8f0;
  /* One meaning per colour (round-4 trial: next/last, read/write and syntax
     shared hues). Execution position, syntax and accent follow VS Code
     (debug stack frame yellow, Light+ / Dark+ tokens); read and write are
     ours, chosen outside the syntax palette. */
  --accent: #005fb8;
  --exec: #ffe066;
  --exec-strong: #b58900;
  --done: #8a94a6;
  --read: #0f8c8c;
  --write: #d35400;
  --flow: #af00db;
  --warn: #b26a00;
  --bp: #e51400;
  --syn-op: #0000ff;
  --syn-control: #af00db;
  --syn-reg: #001080;
  --syn-num: #098658;
  --syn-label: #795e26;
  --syn-str: #a31515;
  --syn-comment: #008000;
  --code: 13px;
  /* The operating system's own code font: SF Mono on macOS, Consolas or
     Cascadia Mono on Windows, DejaVu / Liberation / Ubuntu Mono on Linux. */
  --mono-system: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", "Ubuntu Mono", "Noto Sans Mono", monospace;
  --mono: "JetBrains Mono Web", var(--mono-system);
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font: 13px var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.dark {
  --bg: #111722;
  --panel: #192231;
  --text: #dce5f4;
  --muted: #899ab1;
  --line: #2b384d;
  --accent: #3794ff;
  --exec: #ffd70066;
  --exec-strong: #ffcc00;
  --done: #7f8ba0;
  --read: #4ec9b0;
  --write: #ff8c3a;
  --flow: #c586c0;
  --warn: #cca700;
  --bp: #f14c4c;
  --syn-op: #569cd6;
  --syn-control: #c586c0;
  --syn-reg: #9cdcfe;
  --syn-num: #b5cea8;
  --syn-label: #dcdcaa;
  --syn-str: #ce9178;
  --syn-comment: #6a9955;
  color-scheme: dark;
}
button,
select,
input {
  font: inherit;
  color: inherit;
}
button {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 9px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
button:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border-color: var(--line);
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
input,
select {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  padding: 6px;
  min-width: 0;
}
input[type="checkbox"] {
  accent-color: var(--accent);
  vertical-align: middle;
}
header {
  height: 44px;
  background: var(--panel);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.brand {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  letter-spacing: -0.3px;
  margin-right: 10px;
}
.brand-icon {
  background: #293e62;
  color: white;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 15px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  min-height: 49px;
}
.primary {
  background: var(--accent);
  color: white;
}
.run {
  color: #268058;
}
.separator {
  height: 20px;
  border-left: 1px solid var(--line);
  margin: 0 5px;
}
.toolbar label {
  margin-left: auto;
  white-space: nowrap;
}
.status {
  font-size: 11px;
  background: var(--bg);
  padding: 5px 10px;
  border-radius: 10px;
  margin-left: 10px;
  /* One line: a long stop reason must not make the toolbar taller. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Lives at the foot of the left column: a notice must not push the layout
   around (classroom 2026-10-31: "执行进入" moved the whole window in a demo). */
.side-foot {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  border-top: 1px solid var(--line);
}
/* The assembly note belongs to the files tab only. */
.sidebar:has(#side-files[hidden]) .assembly-choice { display: none; }
#banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  max-height: 180px;
  box-shadow: 0 -4px 10px rgb(0 0 0 / 8%);
  overflow: auto;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
  color: var(--text);
  display: none;
}
#banner.visible { min-height: 100%; box-sizing: border-box; }
#banner.visible {
  display: block;
}
.workspace {
  display: grid;
  grid-template-columns:
    var(--left-w, 236px) 1px minmax(330px, 1fr) 1px
    var(--right-w, 345px);
  flex: 1;
  min-height: 0;
  background: var(--line);
}
.sidebar,
.inspector {
  background: var(--panel);
  overflow: auto;
  min-height: 0;
}
.section-title {
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--muted);
  padding: 14px 12px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-title button,
.section-title select {
  font-size: 10px;
  padding: 2px 4px;
  letter-spacing: 0;
}
.sidebar input {
  margin: 0 10px;
  width: calc(100% - 20px);
}
.file,
.symbol,
.bp {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 0;
  padding: 8px 13px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border-left: 3px solid var(--accent);
}
.file small,
.symbol small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}
.symbol {
  padding: 5px 13px;
  font-family: var(--mono);
}
.bp {
  font-size: 11px;
  white-space: normal;
  color: var(--bp);
}
.code-pane {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.tabs {
  display: flex;
  overflow: auto;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.tabs button {
  border-radius: 0;
  padding: 10px 15px;
  color: var(--muted);
  border-right: 1px solid var(--line);
}
.tabs button.active {
  color: var(--accent);
  border-top: 2px solid var(--accent);
}
.viewbar {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 4px 10px;
  font-size: 11px;
  flex-shrink: 0;
}
.viewbar button {
  padding: 5px 9px;
}
.viewbar button.selected {
  color: var(--accent);
  background: var(--bg);
}
.viewbar span {
  margin-left: auto;
  color: var(--muted);
  font:
    10px var(--mono);
}
/* Editor, machine view and control flow share one slot; the return-to-PC
   button floats over its bottom-right corner. */
.editor-stack {
  flex: 1;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  position: relative;
}
#editor {
  flex: 1;
  min-height: 130px;
  overflow: hidden;
}
/* No file is open: line numbers would suggest there is a document to edit. */
#editor.no-file .cm-editor {
  visibility: hidden;
}
.cm-editor {
  height: 100%;
  font-size: var(--code);
}
/* #editor outranks CodeMirror's own .cm-scroller { font-family: monospace }. */
#editor .cm-scroller {
  font-family: var(--mono);
  overflow: auto;
}
.cm-focused {
  outline: none !important;
}
.cm-gutters {
  background: var(--panel) !important;
  border-right: 1px solid var(--line) !important;
  color: var(--muted) !important;
}
.cm-content {
  padding: 10px 0;
}
.cm-line {
  padding-left: 12px;
}
/* Execution position: about to run in VS Code's debug yellow, just ran in
   a quiet grey (it is the past). */
.cm-line.last-line {
  background: color-mix(in srgb, var(--done) 14%, transparent);
}
.cm-error-mark {
  text-decoration: underline wavy var(--bp);
  text-decoration-skip-ink: none;
}
.cm-warning-mark {
  text-decoration: underline wavy var(--warn);
  text-decoration-skip-ink: none;
}
.cm-lineNumbers .error-gutter {
  color: var(--bp);
  font-weight: 700;
  box-shadow: inset 2px 0 var(--bp);
}
.cm-lineNumbers .warning-gutter {
  color: var(--warn);
  box-shadow: inset 2px 0 var(--warn);
}
.tip-error {
  margin-bottom: 6px;
  color: var(--bp);
  overflow-wrap: anywhere;
}
.cm-line.next-line {
  background: color-mix(in srgb, var(--exec) 55%, transparent);
  box-shadow: inset 3px 0 var(--exec-strong);
}
.cm-line.focus-line {
  outline: 1px solid var(--accent);
}
/* Syntax: VS Code Light+ / Dark+ roles for assembly. */
.cm-reg {
  color: var(--syn-reg);
}
.cm-op {
  color: var(--syn-op);
}
.cm-op.cm-control {
  color: var(--syn-control);
}
.cm-label {
  color: var(--syn-label);
}
.cm-comment {
  color: var(--syn-comment);
  font-style: italic;
}
.cm-number {
  color: var(--syn-num);
}
.cm-string {
  color: var(--syn-str);
}
.cm-gutterElement .break-dot {
  color: var(--bp);
  cursor: pointer;
  font-size: 14px;
}
.bottom {
  height: var(--bottom-h, 210px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.bottom-panel {
  overflow: auto;
  flex: 1;
  padding: 10px 12px;
  min-height: 0;
}
#console {
  display: flex;
  flex-direction: column;
}
#console[hidden] {
  display: none;
}
#output {
  white-space: pre-wrap;
  overflow: auto;
  flex: 1;
  margin: 0 0 10px;
  font:
    12px/1.6 var(--mono);
}
#input-form {
  display: flex;
  gap: 6px;
}
#stdin {
  flex: 1;
  font-family: var(--mono);
}
#input-form button {
  background: var(--bg);
}
#context {
  padding: 6px 14px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  max-height: 280px;
  overflow: auto;
}
h3 {
  font-size: 14px;
  margin: 4px 0 8px;
}
p {
  margin: 6px 0;
}
code,
.mono {
  font-family: var(--mono);
}
#context code {
  color: var(--accent);
  overflow-wrap: anywhere;
}
.muted {
  color: var(--muted);
}
.values {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 3px;
  font:
    11px/1.6 var(--mono);
  margin: 10px 0;
}
.values span:nth-child(odd) {
  color: var(--muted);
}
.values .bits {
  word-break: break-all;
  white-space: normal;
}
.context-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.context-actions button {
  background: var(--bg);
  font-size: 11px;
}
#registers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 2px 10px 10px;
  max-height: 270px;
  overflow: auto;
}
.reg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font:
    11px var(--mono);
  cursor: pointer;
}
.reg .name {
  color: var(--muted);
}
.reg.read {
  border-left: 3px solid var(--read);
}
.reg.write {
  border-right: 3px solid var(--write);
}
.reg.pinned .name:before {
  content: "•";
  color: var(--accent);
}
.reg.focus {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
#memory-form {
  display: flex;
  margin: 0 10px 8px;
}
#address {
  flex: 1;
  font:
    11px var(--mono);
}
#memory {
  padding: 0 10px 20px;
  font:
    10px var(--mono);
}
.mem-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 3px 0;
}
.mem-address {
  width: 72px;
  color: var(--muted);
  font-size: 9px;
  flex-shrink: 0;
}
.byte {
  padding: 5px 3px;
  border-radius: 3px;
  cursor: pointer;
  min-width: 21px;
  text-align: center;
  background: var(--bg);
}
.byte.read {
  background: color-mix(in srgb, var(--read) 22%, var(--panel));
}
.byte.write {
  background: color-mix(in srgb, var(--write) 22%, var(--panel));
}
.byte.focus {
  outline: 1px solid var(--accent);
}
.ascii {
  margin-left: 4px;
  letter-spacing: 1px;
  color: var(--muted);
}
footer {
  height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 10px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.overlay-controls {
  display: flex;
  gap: 10px;
  flex: 1;
}
.read {
  color: var(--read);
}
.write {
  color: var(--write);
}
.flow {
  color: var(--flow);
}
#overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}
#tooltip {
  position: fixed;
  z-index: 40;
  max-width: 360px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 30px #0002;
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 8px;
  line-height: 1.6;
  font-size: 12px;
  pointer-events: none;
}
.alternate {
  flex: 1;
  overflow: auto;
  min-height: 130px;
  padding: 12px;
}
.alternate[hidden] {
  display: none;
}
.instruction {
  display: grid;
  grid-template-columns: 18px 80px minmax(180px, 1fr);
  gap: 8px;
  padding: 7px;
  font:
    11px var(--mono);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.instruction.next {
  background: color-mix(in srgb, var(--exec) 55%, var(--panel));
}
.instruction.last {
  border-left: 3px solid var(--done);
}
.instruction small {
  grid-column: 2/4;
  color: var(--muted);
}
.block {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--bg);
}
.block.current {
  border-color: var(--accent);
}
.block .block-title {
  display: flex;
  justify-content: space-between;
  font:
    11px var(--mono);
  margin-bottom: 8px;
}
.block code {
  display: block;
  font-size: 11px;
  line-height: 1.6;
}
.block .edges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.block .edges button {
  border: 1px solid var(--line);
  font-size: 10px;
  color: var(--flow);
}
.trace-row {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  font:
    11px var(--mono);
  padding: 5px;
}
.trace-row.selected {
  background: var(--bg);
}
.trace-row span:first-child {
  color: var(--muted);
  min-width: 42px;
}
.trace-row small {
  margin-left: auto;
  color: var(--muted);
}
details {
  margin: 4px 0;
}
summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  padding: 4px;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  width: min(650px, 90vw);
  max-height: 80vh;
  padding: 22px;
  box-shadow: 0 25px 80px #0004;
}
dialog::backdrop {
  background: #17223c66;
}
.close {
  float: right;
}
.command-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
dialog textarea {
  width: 100%;
  height: 220px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  font:
    12px/1.6 var(--mono);
  padding: 10px;
}
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 1150px) {
  .workspace {
    grid-template-columns:
      var(--left-w, 216px) 1px minmax(300px, 1fr) 1px
      var(--right-w, 300px);
  }
  header {
    padding: 0 10px;
  }
  .toolbar {
    gap: 0;
    padding: 7px;
  }
  .toolbar button {
    padding: 6px;
  }
  .overlay-controls {
    gap: 4px;
  }
  footer {
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}
/* Keep the HTML hidden contract even for components with explicit display. */
[hidden] {
  display: none !important;
}
.values {
  grid-template-columns: 82px minmax(0, 1fr);
}
.values .bits {
  font-size: 10px;
}
@media (max-height: 850px) {
  .bottom {
    height: var(--bottom-h, 145px);
  }
}
.overlay-settings summary {
  cursor: pointer;
  font-size: 11px;
  opacity: 0.75;
}
.overlay-settings .overlay-controls {
  position: absolute;
  bottom: 38px;
  left: 12px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  z-index: 10;
}

/* Focus mode (DESIGN §3.7): the IDE is blurred and blocked; the lens floats above it. */
#focus-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(5px);
}
body.focusing #overlay,
body.focusing #tooltip {
  visibility: hidden;
}
#focus-lens {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 51;
  width: min(1120px, 94vw);
  height: min(740px, 90vh);
  min-width: 520px;
  min-height: 420px;
  resize: both;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.22);
}
#focus-lens:focus {
  outline: none;
}
#focus-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--line);
  cursor: move;
  user-select: none;
}
#focus-where,
#focus-keys {
  color: var(--muted);
  font-size: 12px;
}
#focus-head label {
  color: var(--muted);
  font-size: 12px;
}
#focus-keys {
  margin-left: auto;
}
#focus-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  min-height: 0;
}
#focus-path {
  overflow: auto;
  padding: 16px 64px 16px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  align-items: start;
  gap: 22px 72px;
}
#focus-objects {
  overflow: auto;
  border-left: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#focus-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.fseg {
  border: 1px solid var(--line);
  border-radius: 7px;
  min-width: 0;
  background: var(--panel);
}
.fseg-head {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.fiter {
  font-weight: 400;
  margin-left: 6px;
  color: var(--accent);
}
.frow {
  display: grid;
  grid-template-columns: 22px 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  font-family: var(--mono);
  font-size: var(--code);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.frow.done {
  border-left-color: var(--done);
}
.frow.pred {
  border-left: 3px dashed var(--line);
}
.frow.sel {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.frow code {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fln {
  color: var(--muted);
  text-align: right;
}
.fbp {
  padding: 0;
  font-size: 11px;
  color: var(--muted);
}
.fbp.on {
  color: #d64545;
}
.fexpand {
  padding: 0 4px;
  font-size: 11px;
  color: var(--muted);
}
.fbadges {
  display: flex;
  gap: 3px;
}
.fbadge {
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  border: 1px solid var(--line);
}
.fbadge.done {
  border-color: var(--done);
  color: var(--done);
}
.fbadge.pred {
  border-style: dashed;
}
.fbadge.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}
.fmachine {
  padding: 1px 8px 1px 58px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  white-space: pre;
}
.fhint {
  padding: 1px 8px 3px 58px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.75;
}
.fstop {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 7px;
}
.fobj-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.fobj {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 12px;
}
.fobj span:first-child {
  color: var(--muted);
}
.fobj.touched {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.fobj.lit-read {
  outline: 2px solid var(--read);
  outline-offset: -1px;
}
.fobj.lit-write {
  outline: 2px solid var(--write);
  outline-offset: -1px;
  background: color-mix(in srgb, var(--warn) 15%, var(--panel));
}
.fmore {
  font-size: 11px;
  color: var(--muted);
}
#focus-beat {
  border-top: 1px solid var(--line);
  padding: 12px 18px 14px;
  display: grid;
  gap: 8px;
}
.focus-beat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#focus-tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--accent);
  color: var(--accent);
}
#focus-tag.pred {
  border-style: dashed;
  border-color: var(--muted);
  color: var(--muted);
}
#focus-src {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
#focus-dots {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.fdot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}
.fdot.past {
  background: var(--muted);
}
.fdot.now {
  background: var(--accent);
  border-color: var(--accent);
}
#focus-eq {
  font-family: var(--mono);
  font-size: 22px;
  min-height: 1.4em;
  white-space: nowrap;
  overflow-x: auto;
}
#focus-eq .dim {
  color: var(--muted);
}
#focus-eq .fresh {
  color: var(--read);
  background: color-mix(in srgb, var(--read) 12%, var(--panel));
  border-radius: 4px;
  padding: 0 3px;
}
#focus-eq .ok {
  color: var(--write);
}
#focus-caption {
  color: var(--muted);
  min-height: 1.3em;
}
.focus-controls {
  display: flex;
  gap: 6px;
}
.focus-controls button {
  border-color: var(--line);
}
#focus-why-text {
  border-left: 3px solid var(--line);
  padding: 2px 0 2px 10px;
  line-height: 1.6;
  max-width: 80ch;
}
.ftoken {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  padding: 1px 8px;
  border-radius: 9px;
  color: var(--panel);
  font:
    600 11px var(--mono);
  white-space: nowrap;
}
#focus-input {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
#focus-input input {
  width: 180px;
  padding: 5px 8px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--panel);
}
#focus-input button {
  border-color: var(--line);
}
.cm-inline-value {
  margin-left: 2.5em;
  color: var(--muted);
  opacity: 0.75;
  font-style: italic;
  cursor: default;
}
.command-item kbd {
  float: right;
  color: var(--muted);
  font:
    11px var(--mono);
}
#picker-list {
  max-height: 55vh;
  overflow: auto;
  margin-top: 6px;
}
#picker-list .command-item.selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.picker-help {
  font-size: 11px;
  margin: 8px 0 0;
}
.cm-peek {
  margin: 4px 0 6px 0;
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  font-family: var(--font);
  max-height: 220px;
  overflow: auto;
}
.cm-peek-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.cm-peek-head button {
  margin-left: auto;
  padding: 0 6px;
}
.cm-peek-row {
  display: grid;
  grid-template-columns: 110px 90px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  text-align: left;
  border-radius: 0;
  padding: 3px 8px;
  font-size: 12px;
}
.cm-peek-row small {
  color: var(--muted);
}
.cm-peek-row code {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  padding-left: 10px;
}
.bp-row .bp {
  padding-left: 6px;
}
.bp-row.off .bp {
  color: var(--muted);
}
.bp-row > button:not(.bp) {
  padding: 2px 6px;
  color: var(--muted);
}
.cm-gutterElement .break-dot.off {
  color: var(--muted);
}
.bp-form {
  display: grid;
  gap: 10px;
  min-width: min(440px, 80vw);
}
.bp-form label:not(:first-child) {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.bp-form input:not([type="checkbox"]) {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
}
#logs-tab.unread::after {
  content: " •";
  color: var(--warn);
}
#context-menu {
  position: fixed;
  z-index: 60;
  min-width: 200px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
#context-menu button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
}
#context-menu kbd {
  color: var(--muted);
  font:
    11px var(--mono);
}
/* Status chip: what the machine is doing, by colour and words (trial 2026-10-22). */
.status[data-state] {
  font-size: 12px;
  border: 1px solid var(--line);
}
.status[data-state="running"] {
  background: color-mix(in srgb, #2f9e62 14%, var(--panel));
  border-color: #2f9e62;
  color: #24804f;
}
.status[data-state="running"]::before {
  content: "● ";
  animation: status-blink 1s steps(2, start) infinite;
}
.status[data-state="breakpoint"] {
  background: color-mix(in srgb, var(--bp) 12%, var(--panel));
  border-color: var(--bp);
  color: #b23d3d;
}
.status[data-state="waiting"] {
  background: color-mix(in srgb, var(--warn) 16%, var(--panel));
  border-color: var(--warn);
}
.status[data-state="error"] {
  background: #fde7e7;
  color: #a12f2f;
}
.status[onclick],
.status[title^="点击"] {
  cursor: pointer;
}
@keyframes status-blink {
  to {
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .status[data-state="running"]::before {
    animation: none;
  }
}
#output .echo {
  color: var(--accent);
  font-weight: 600;
}
.demo-speed-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
#demo-speed {
  width: 88px;
  min-width: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.demo-speed-end, #demo-speed-label {
  font-size: 11px;
  color: var(--muted);
}
#demo-speed-label { min-width: 22px; font-variant-numeric: tabular-nums; }
/* Arrival spotlight: everything but the next line dims briefly after a jump. */
.cm-editor.arrival-spotlight .cm-line:not(.next-line),
.cm-editor.arrival-spotlight .cm-gutterElement {
  opacity: 0.28;
}
.cm-editor .cm-line,
.cm-editor .cm-gutterElement {
  transition: opacity 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cm-editor .cm-line,
  .cm-editor .cm-gutterElement {
    transition: none;
  }
}
.fobj.group {
  flex-wrap: wrap;
}
.fobj .fraw {
  flex-basis: 100%;
  color: var(--muted);
  opacity: 0.75;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.radix-switch {
  font-size: 11px;
  color: var(--muted);
}
.radix-switch select {
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  padding: 1px 4px;
}
.mem-radix {
  margin-left: 8px;
  color: var(--muted);
  font-weight: 400;
}
#memory[data-radix="bin"] .mem-row {
  flex-wrap: wrap;
}
#memory[data-radix="bin"] .byte {
  min-width: 0;
  letter-spacing: -0.02em;
}
/* Another reading of the same bits (e.g. 72 'H'): a faint note, not a claim. */
.value-note {
  color: var(--muted);
  opacity: 0.7;
  font-weight: 400;
  margin-left: 0.35em;
}
abbr.term {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}
#tooltip .defs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  margin: 4px 0;
  font-size: 11px;
  color: var(--muted);
}
#tooltip .defs dt {
  font-weight: 600;
}
#tooltip .defs dd {
  margin: 0;
}
#focus-note {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}
.cm-line.delay-nop:not(.next-line):not(.last-line) {
  opacity: 0.45;
}
.radix-legend {
  color: var(--muted);
  font-size: 10.5px;
  margin-left: 6px;
}
#radix-help {
  padding: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.radix-help p {
  margin: 4px 0;
  line-height: 1.55;
  max-width: 70ch;
}
.radix-help h4 {
  margin: 14px 0 4px;
}
.ascii-table {
  border-collapse: collapse;
  font-size: 12px;
}
.ascii-table td {
  padding: 2px 6px;
  border-bottom: 1px solid var(--line);
}
.ascii-table td:nth-child(3n) {
  padding-right: 18px;
}
#focus-progress {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
#focus-progress + #focus-dots {
  margin-left: 8px;
}
/* The lens input must be found at a glance (round-3 trial). */
#focus-input {
  padding: 8px 10px;
  border: 1px solid var(--warn);
  border-radius: 6px;
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  color: var(--text);
}
#focus-input label {
  font-weight: 600;
}
.radix-example {
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.fbadge.done.earlier:not(.sel) {
  opacity: 0.55;
}

/* Draggable lines between panels (2026-10-23 feedback). The visible line
   stays 1px; a wider invisible strip takes the pointer. */
.splitter {
  position: relative;
  z-index: 6;
  background: var(--line);
  flex-shrink: 0;
  touch-action: none;
}
.splitter.col {
  cursor: col-resize;
}
.splitter.row {
  height: 1px;
  cursor: row-resize;
}
.splitter::before {
  content: "";
  position: absolute;
  inset: 0 -3px;
}
.splitter.row::before {
  inset: -3px 0;
}
.splitter:hover,
.splitter:focus-visible,
.splitter.dragging {
  background: var(--accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--accent);
}
body.resizing-x,
body.resizing-x * {
  cursor: col-resize !important;
  user-select: none;
}
body.resizing-y,
body.resizing-y * {
  cursor: row-resize !important;
  user-select: none;
}

/* Project/file operations share the existing compact IDE visual language. */
.project-heading { padding:12px 12px 2px; }
#project-title { font-weight:700; padding:2px 0; max-width:100%; overflow:hidden; text-overflow:ellipsis; display:block; }
#workspace-status { display:block; font-size:10px; color:var(--muted); margin-top:5px; line-height:1.5; }
.explorer-heading { letter-spacing:0; gap:4px; flex-wrap:wrap; white-space:nowrap; }
.explorer-heading span { display:flex; gap:2px; }
.file-tree, .file-tree ul { list-style:none; padding:0; margin:0; }
.file-tree ul { margin-left:13px; border-left:1px solid var(--line); }
.file-tree summary { cursor:pointer; display:flex; align-items:center; gap:5px; padding:4px 5px 4px 10px; font-size:12px; min-height:31px; }
.file-tree summary::before { content:''; width:5px; height:5px; margin:0 3px 0 1px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); flex-shrink:0; transition:transform .12s; }
.file-tree details[open] > summary::before { transform:rotate(45deg); }
.folder-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-row { display:flex; align-items:center; padding-right:5px; min-width:0; border-left:2px solid transparent; }
.tree-row.has-error .tree-open { color:var(--bp); }
.tree-row.active { background:color-mix(in srgb,var(--accent) 9%,var(--panel)); border-left-color:var(--accent); }
.tree-open { display:flex; gap:7px; align-items:center; min-width:0; flex:1; padding:7px 8px; text-align:left; border-radius:0; font-size:12px; }
.tree-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-menu { flex-shrink:0; font-size:16px; padding:0 5px; color:var(--muted); }
.tree-menu:hover,.tree-menu:focus-visible { color:var(--text); }
.tree-empty { padding:9px 12px; color:var(--muted); font-size:11px; line-height:1.6; }
.entry-badge { flex-shrink:0; color:var(--accent); margin-left:auto; display:inline-flex; }
/* The entry is marked with an arrow into a bar (where execution starts); its name is on hover. */
.entry-badge svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.entry-choice { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px; padding:12px 10px 5px; font-size:10px; color:var(--muted); }
.entry-choice select { width:100%; font-size:11px; padding:4px; }
.workspace-tools { display:flex; flex-wrap:wrap; gap:2px; padding:2px 6px 8px; border-bottom:1px solid var(--line); }
.workspace-tools button { color:var(--muted); font-size:10px; padding:5px; }
.file-tab { display:flex; align-items:center; border-right:1px solid var(--line); flex-shrink:0; }
.file-tab.active { color:var(--accent); border-top:2px solid var(--accent); }
.tabs .file-tab button { border:0; padding:9px 8px; }
.tabs .file-tab.active button { color:var(--accent); }
.tabs .close-tab { padding:6px; color:var(--muted); }
.empty-tab { color:var(--muted); padding:10px; font-size:11px; }
.project-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; flex-wrap:wrap; }
.file-actions { display:flex; flex-direction:column; gap:5px; align-items:stretch; }
.file-actions button { text-align:left; padding:10px; border:1px solid var(--line); }
#project-form label { display:block; }
#project-value { display:block; width:100%; margin-top:8px; }
#project-error { color:var(--warn); line-height:1.5; }
.project-explanation { overflow-wrap:anywhere; line-height:1.6; }
.drop-zone { display:flex; flex-direction:column; gap:6px; width:100%; padding:28px 16px; border:2px dashed var(--line); border-radius:8px; background:none; color:inherit; text-align:center; }
.drop-zone.over, .drop-zone:hover { border-color:var(--accent); }
.drop-zone small { color:var(--muted); font-weight:normal; }
.import-folder { text-align:center; }
.link-button { border:0; background:none; padding:0; color:var(--accent); text-decoration:underline; }
.import-preview { max-height:220px; overflow:auto; margin:8px 0; padding:4px 10px; list-style:none; border:1px solid var(--line); border-radius:6px; }
.import-preview li { display:flex; justify-content:space-between; gap:12px; padding:2px 0; overflow-wrap:anywhere; }
.import-preview small, .import-preview .skipped { color:var(--muted); }
.import-target { display:flex; flex-direction:column; gap:6px; margin:10px 0; padding:0; border:0; }
.danger { color:#bf4040; }
button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* Assembly scope (P0): auto by default; single file or a manual scope. */
.assembly-choice { padding:10px 10px 4px; font-size:10px; color:var(--muted); }
.assembly-mode { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.assembly-mode > span { font-weight:600; }
.assembly-choice .entry-choice { padding:7px 0 0; }
.assembly-choice p { margin:6px 0 0; line-height:1.5; }
.sidebar .joint-pick { width:auto; flex:0 0 auto; margin:0 0 0 8px; padding:0; }
.tree-row.joined .tree-open { font-weight:600; }
.viewbar .pc-chip { margin-left:auto; font:11px var(--mono); color:var(--muted); white-space:nowrap; }
.viewbar .target-chip { margin-left:8px; padding:2px 7px; border:1px solid var(--line); border-radius:9px; color:var(--text); max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewbar .target-chip.stale { border-color:var(--warn); color:var(--warn); }
.scope-banner { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:7px 12px; font-size:12px; line-height:1.5; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--warn) 12%, var(--panel)); color:var(--text); flex-shrink:0; }
.scope-banner[hidden] { display:none; }
.scope-banner span { flex:1 1 260px; }
.scope-banner button { padding:4px 9px; border:1px solid var(--line); border-radius:5px; background:var(--panel); }
.scope-banner button:first-of-type { border-color:var(--accent); color:var(--accent); }
.break-dot.stale { opacity:.4; }
.bp.stale { opacity:.6; }
.scope-hint { display:block; margin-top:3px; color:var(--warn); white-space:normal; }
.split-button { position:relative; display:inline-flex; }
.split-button #assemble { border-top-right-radius:0; border-bottom-right-radius:0; }
.split-button #assemble-mode { border-top-left-radius:0; border-bottom-left-radius:0; border-left:1px solid color-mix(in srgb, white 35%, transparent); padding:6px 7px; }
.assemble-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:40; display:flex; flex-direction:column; min-width:270px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgb(0 0 0 / .18); }
.assemble-menu[hidden] { display:none; }
.assemble-menu button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; white-space:normal; padding:7px 9px 7px 26px; position:relative; }
.assemble-menu button small { color:var(--muted); font-size:10px; }
.assemble-menu button[aria-checked="true"]::before { content:'✓'; position:absolute; left:9px; top:7px; color:var(--accent); }
.assembly-mode b { color:var(--text); font-size:11px; }
.assembly-mode small { flex-basis:100%; }
.split-button .primary:hover, .split-button .primary[aria-expanded="true"] { background:color-mix(in srgb, var(--accent) 82%, black); border-color:transparent; }
/* BIN registers: the full 32-bit pattern, one register per row. */
#registers.bin { grid-template-columns: 1fr; }
#registers.bin .reg { gap: 8px; }
#registers.bin .value { text-align: right; overflow-wrap: normal; word-break: keep-all; letter-spacing: -0.2px; }
/* Terminal attention: input waits light the box; output gets a static mark
   under reduced motion (the pulse itself is a Web Animation). */
#console.waiting #input-form { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
#console.waiting #stdin { border-color: var(--accent); }
[data-bottom="console"].unread::after { content: " •"; color: var(--warn); }
.fresh-output { box-shadow: inset 3px 0 0 var(--accent); }
/* Hover brief and detailed inspector (classroom 2026-10-24). */
#tooltip { pointer-events: auto; }
#tooltip .tip-hint { font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
#tooltip .tip-formula { margin: 4px 0; }
#tooltip .tip-detail { margin-top: 6px; padding: 3px 8px; border: 1px solid var(--line); color: var(--accent); }
.inspect-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.inspect-head h3 { margin: 6px 0 2px; }
.inspect-head span { color: var(--muted); font-size: 11px; }
.detail-steps, .syscall-steps { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 8px 0; }
.detail-steps dt, .syscall-steps dt { color: var(--muted); font-size: 11px; white-space: nowrap; }
.detail-steps dd, .syscall-steps dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.detail-steps ol, .detail-steps ul, .syscall-steps ul { margin: 0; padding-left: 18px; }
.detail-steps small, .syscall-steps small { color: var(--muted); }
.detail-when { display: block; }
.detail-terms summary { cursor: pointer; color: var(--muted); font-size: 11px; }
/* Workspace layout (classroom 2026-10-24) ------------------------------- */
/* Top: a project menu, the project with its save state, learning, settings. */
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 45; min-width: 250px; display: flex; flex-direction: column; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.menu.menu-right { left: auto; right: 0; }
.menu > button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal; padding: 7px 10px; }
.menu small { color: var(--muted); font-size: 10px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.menu-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; }
.menu-row button { border: 1px solid var(--line); padding: 3px 8px; }
.project-state { display: flex; flex-direction: column; min-width: 0; max-width: 260px; }
.project-state #project-title { padding: 0; text-align: left; }
.project-state #workspace-status { margin-top: 1px; }
/* Toolbar: main actions keep words; stepping is one group of icons whose
   names show on hover and keyboard focus, and as text on touch screens. */
.tool-group { display: inline-flex; align-items: center; gap: 1px; padding: 1px; border: 1px solid var(--line); border-radius: 7px; margin: 0 3px; }
.tool { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; }
.tool svg, .side-tabs svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: none) { .tool-label { position: static; width: auto; height: auto; clip: auto; font-size: 11px; } }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 46; white-space: nowrap; background: var(--text); color: var(--panel); font-size: 11px; font-weight: 400; letter-spacing: 0; padding: 3px 7px; border-radius: 4px; pointer-events: none; }
/* Left: one group at a time, chosen from a vertical tab strip. */
.sidebar { display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 0; overflow: hidden; }
.side-tabs { grid-row: 1 / -1; display: flex; flex-direction: column; gap: 3px; padding: 6px 3px; border-right: 1px solid var(--line); background: var(--bg); }
.side-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 1px; font-size: 10px; border-radius: 6px; color: var(--muted); position: relative; white-space: normal; text-align: center; hyphens: manual; line-height: 1.15; }
.side-tabs button[aria-selected="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--panel)); }
.side-badge { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.side-panels { grid-column: 2; grid-row: 1; overflow: auto; min-height: 0; }
.side-panels > section { padding-bottom: 12px; }
/* Right: inspector, registers and memory share the height; each can be
   resized, folded to its title, and scrolls on its own. */
.inspector { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.panel { display: flex; flex-direction: column; min-height: 0; }
#panel-context { flex: 0 0 var(--context-h, 34%); }
#panel-registers { flex: 0 0 var(--registers-h, 34%); }
#panel-memory { flex: 1 1 0; }
.panel.fill { flex: 1 1 0 !important; }
.panel.collapsed { flex: 0 0 auto !important; }
.panel.collapsed .panel-body { display: none; }
.panel-head { padding: 8px 12px 6px; flex-shrink: 0; }
.panel-toggle { font-size: 10px !important; font-weight: 700; letter-spacing: 1.2px !important; color: var(--muted); padding: 2px 4px 2px 0 !important; }
.panel-toggle::before { content: "▾ "; }
.panel-toggle[aria-expanded="false"]::before { content: "▸ "; }
.panel-body { overflow: auto; min-height: 0; flex: 1; }
#context { max-height: none; border-bottom: 0; overflow: auto; }
#registers { max-height: none; overflow: visible; }
.inspector .splitter.row { flex-shrink: 0; }
/* Overlay settings now live in focus mode, next to the paths they draw. */
#focus-head .overlay-settings { position: relative; }
#focus-head .overlay-settings .overlay-controls { top: calc(100% + 6px); bottom: auto; left: 0; flex-wrap: wrap; width: max-content; max-width: 420px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); border-radius: 8px; }
/* Focus mode: the untaken side of a branch, folded by default. */
.funtaken { margin: 0; padding: 4px 8px; font-size: 11px; color: var(--muted); }
/* The untaken side sits in a box of its own, dashed and dimmed. */
.fseg.fghost { border-style: dashed; background: transparent; }
.funtaken summary { cursor: pointer; padding: 2px 0; }
.funtaken-tag { border: 1px dashed var(--muted); border-radius: 4px; padding: 0 4px; margin-right: 2px; }
.funtaken-now { color: var(--text); opacity: .8; }
.funtaken .frow.untaken { opacity: .55; border: 0; border-bottom: 1px dashed var(--line); }
.funtaken-note { margin: 2px 0 4px; font-size: 10px; }
/* Focus mode: bit-by-bit view. */
#focus-bits { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12px; max-height: 260px; overflow: auto; }
.bits-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.bits-head span { color: var(--muted); font-size: 11px; }
.bits-step p { margin: 4px 0; }
.brow { display: flex; align-items: center; gap: 8px; font-family: var(--mono); }
.blabel { width: 92px; flex-shrink: 0; color: var(--muted); font-size: 11px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbits { display: inline-flex; flex-wrap: wrap; }
.bbits i { font-style: normal; width: 1.15em; text-align: center; line-height: 1.5; border-radius: 3px; }
.bbits i.pending { color: var(--muted); opacity: .5; }
.bbits i.in, .bbits i.new { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.bbits i.hi { background: color-mix(in srgb, var(--syn-label) 18%, transparent); }
.bbits i.lo { background: color-mix(in srgb, var(--syn-num) 18%, transparent); }
.bgap { width: 5px; }
.brow.carry { font-size: 10px; color: var(--muted); }
.brow.result .bbits i { font-weight: 700; }
.bout { font-size: 10px; color: var(--warn); }
.bits-controls { display: flex; gap: 6px; margin-top: 6px; }
#find-list { max-height: 220px; overflow: auto; margin: 8px 0; } #find-list .command-item span { font-size: 11px; } .find-code { white-space: pre-wrap; } #find-detail { border-top: 1px solid var(--line); padding-top: 6px; }
/* Hands-on introduction card: it floats over the code pane and can shrink to
   a pill; it never blocks the editor or the toolbar. */
.tutorial { position: fixed; z-index: 55; top: 128px; right: calc(var(--right-w, 345px) + 22px); width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 420px); min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .2); padding: 10px 12px; font-size: 12px; line-height: 1.6; }
.tutorial header { display: flex; align-items: center; gap: 8px; }
.tutorial header span { flex: 1; color: var(--muted); font-size: 11px; }
.tutorial h4 { margin: 6px 0 2px; font-size: 14px; }
.tutorial-goal { margin: 2px 0 6px; }
.tutorial-checks { list-style: none; padding: 0; margin: 4px 0; }
.tutorial-checks li { color: var(--muted); }
.tutorial-checks li.ok { color: var(--accent); }
.tutorial-hint { margin: 4px 0; padding: 4px 8px; background: var(--bg); border-radius: 6px; }
.tutorial-fail { color: var(--warn); margin: 4px 0; }
.tutorial-answer { font: 11px/1.5 var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; overflow: auto; max-height: 220px; user-select: text; }
.tutorial-go { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tutorial-go button { border: 1px dashed var(--accent); color: var(--accent); padding: 3px 8px; }
.tutorial-actions { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.tutorial-actions span { flex: 1; }
.tutorial-actions button { border: 1px solid var(--line); }
.tutorial.collapsed { width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.tutorial-pill { background: var(--accent); color: white; border-radius: 16px; padding: 6px 12px; box-shadow: 0 6px 18px rgb(0 0 0 / .2); }
@media (max-width: 900px) { .tutorial { right: 16px; } }
/* Inspector mode: following execution or pinned to an object. */
.inspect-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 6px; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: var(--muted); background: var(--bg); }
.inspect-mode.pinned { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.inspect-mode button { margin-left: auto; padding: 2px 8px; border: 1px solid var(--line); font-size: 11px; }
.reg-legend { flex: 1; text-align: right; margin-right: 6px; font-weight: 400; letter-spacing: 0; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-term { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.find-more summary { cursor: pointer; color: var(--muted); font-size: 11px; padding: 4px 8px; }
/* Details open away from the pointer (classroom 2026-10-31). */
.usage-parts { list-style: none; margin: 4px 0 0 !important; padding: 0 !important; }
.usage-parts li { margin-top: 2px; }
#panel-context.attention { animation: panel-attention 1.5s ease-out; }
@keyframes panel-attention {
  0%, 45% { box-shadow: inset 0 0 0 2px var(--flow); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  #panel-context.attention { animation: none; box-shadow: inset 0 0 0 2px var(--flow); }
}


/* Top bar is a menubar (classroom 2026-11-03): Project, Learn and Interface
   menus, then the project name with its save state, then the command palette. */
.menubar { display: flex; align-items: center; gap: 2px; }
.menu-button { padding: 5px 10px; font-weight: 500; }
.menu-button[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: var(--line); }
.menu-label { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 1px; }
.menu-group { display: flex; flex-direction: column; }
.menu-group > button { text-align: left; padding: 6px 10px 6px 18px; white-space: normal; }
header .project-state { margin-left: 12px; padding-left: 14px; border-left: 1px solid var(--line); flex: 1; }
header #workspace-status { margin-top: 0; }
#commands { display: inline-flex; align-items: center; gap: 6px; min-width: 190px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--bg); }
#commands span { flex: 1; text-align: left; }
#commands svg, #follow-return svg, .footer-key svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#commands kbd { font: 10px var(--font); color: var(--muted); }
@media (max-width: 900px) { #commands { min-width: 0; } #commands span, #commands kbd { display: none; } header .project-state { margin-left: 4px; padding-left: 8px; } }
/* Run controls: the first button starts a full run and then goes back to the
   start; the second runs step by step, then pauses, then continues. */
.run-group .tool { padding: 5px 9px; }
.run-group .tool svg { width: 17px; height: 17px; }
.toolbar .demo-speed-control { margin: 0 6px 0 4px; }
.demo-speed-control .demo-speed-end { font-size: 11px; color: var(--muted); }
#demo-speed-label { min-width: 52px; font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
/* Back to the executing line when the student has moved away from it. */
#follow-return { position: absolute; right: 18px; bottom: 14px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 16px; border: 1px solid var(--exec-strong); background: var(--panel); color: var(--exec-strong); box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
#follow-return svg { width: 18px; height: 18px; }
#follow-return:hover { background: color-mix(in srgb, var(--exec) 40%, var(--panel)); }
/* Focus mode and value display are modes, not footnotes. */
.footer-key { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text); }
button.footer-key { padding: 4px 9px; border: 1px solid var(--line); }
label.footer-key select { font-size: 12px; font-weight: 600; padding: 2px 4px; }
/* A write replaces a value: the old one struck through above the new. */
/* Every cell has the height of two short lines, so a write never moves the
   panel; the new value keeps its size and the struck-out one is smaller. */
#registers:not(.bin) .reg { height: 29px; padding-top: 0; padding-bottom: 0; }
#registers.bin .reg { min-height: 29px; padding-top: 3px; padding-bottom: 3px; }
#registers.bin .value { white-space: nowrap; }
/* Bits as dots: filled 1, hollow 0; bytes wrap, so at most two lines. */
.bit-dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 4px; min-width: 0; }
.bit-byte { display: inline-flex; gap: 1px; }
.bit-byte i { width: 4px; height: 4px; border-radius: 50%; border: 1px solid currentColor; box-sizing: border-box; }
.bit-byte i:nth-child(4) { margin-right: 2px; }
.bit-byte i.one { background: currentColor; }
.bit-byte i.zero { opacity: .55; }
.reg .value.replaced { display: flex; flex-direction: column; align-items: flex-end; }
.reg .value.replaced .old { color: var(--muted); text-decoration-color: var(--write); text-decoration-thickness: 1.5px; font-size: 9.5px; line-height: 11px; }
.reg .value.replaced .new { color: var(--write); font-weight: 600; line-height: 13px; }
/* Ligatures merge characters (-> or <=) and would hide what was typed. */
body { font-feature-settings: "liga" 0, "calt" 0; }
.menu-group .font-choice { position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.font-choice .sample { font-size: 11px; color: var(--muted); }
.font-choice[aria-checked="true"] { color: var(--accent); font-weight: 600; }
.font-choice[aria-checked="true"]::before { content: "✓"; position: absolute; left: 6px; }
/* The core, like VS Code's interpreter picker: shows what runs the code. */
.engine-wrap { margin-left: auto; }
.engine-button { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); padding: 3px 8px; }
.engine-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.menu.menu-up { top: auto; bottom: calc(100% + 6px); }
.engine-info { display: flex; flex-direction: column; gap: 3px; padding: 4px 10px 6px; font-size: 12px; max-width: 280px; }
.engine-info small, #engine-delay { color: var(--muted); font-size: 11px; line-height: 1.5; }
.panel-head .context-tools { display: inline-flex; gap: 1px; margin-left: auto; }
.panel-head .context-tools .tool { padding: 3px 5px; }
.panel-head .context-tools .tool svg { width: 15px; height: 15px; }
/* The tip opens to the left: the panel sits at the window's right edge. */
.panel-head .context-tools [data-tip]:hover::after, .panel-head .context-tools [data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.fobj .fval { min-width: 0; display: flex; justify-content: flex-end; }
/* Footer labels stay on one line; the prefix legend gives way first. */
footer { min-width: 0; }
.footer-key, .radix-switch, #pc, .engine-button { white-space: nowrap; flex-shrink: 0; }
footer .radix-legend { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
.panel-head #clear-focus { padding: 3px 5px; }
.panel-head #clear-focus svg { width: 15px; height: 15px; }
.panel-head #clear-focus[data-tip]:hover::after, .panel-head #clear-focus[data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.radix-group { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Breakpoint buttons carry the breakpoint's filled dot; line steps use a bar. */
.tool svg .dot { fill: var(--bp); stroke: none; }
.tool-divider { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
/* File tree icons: outline pages, a letter for the kind of code. */
:root { --icon-folder: #c08a1e; --icon-asm: var(--accent); --icon-c: #7a5cc2; }
body.dark { --icon-folder: #dcb67a; --icon-c: #b39ddb; }
.file-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linejoin: round; }
.file-icon text { font: 700 7px var(--font); stroke: none; fill: currentColor; }
.file-icon.asm { color: var(--icon-asm); }
.file-icon.c, .file-icon.h { color: var(--icon-c); }
.file-icon.text .line { stroke: var(--muted); }
.file-icon.folder .shape, .file-icon.open .shape { stroke: var(--icon-folder); fill: color-mix(in srgb, var(--icon-folder) 22%, transparent); }
.file-tree details > summary .file-icon.open, .file-tree details[open] > summary .file-icon.folder { display: none; }
.file-tree details[open] > summary .file-icon.open { display: block; }
.file-tree summary { display: flex; align-items: center; gap: 5px; }
/* Focus mode is a mode to enter, not a footnote: accent text on a tint. */
button#focus-open { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
button#focus-open:hover { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.file-icon.asm .page, .file-icon.c .page, .file-icon.h .page { stroke: color-mix(in srgb, currentColor 70%, var(--muted)); }
/* Longer languages (classroom 2026-11-04): register cells go to one column
   when the panel cannot hold a name and a full value twice side by side. */
#registers-body { container-type: inline-size; }
@container (max-width: 250px) { #registers:not(.bin) { grid-template-columns: 1fr; } }
.reg { gap: 6px; }
/* A crowded tab bar (narrow window, longer language) wraps instead of
   pushing the PC or the step count out of sight. */
.viewbar { flex-wrap: wrap; row-gap: 2px; }
.viewbar .pc-chip, #history-info { flex-shrink: 0; }
/* Memory panel (classroom 2026-11-04): the same bytes as bytes, words or
   text; a row per data label; a thin bar of the address space on the right
   that opens into a map of stack, heap, data and code. */
#panel-memory .panel-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px; }
.mem-views { display: inline-flex; gap: 2px; margin-left: auto; }
.mem-views button { padding: 3px 8px !important; font-size: 11px; border-radius: 5px; }
.mem-views button[aria-pressed="true"] { color: var(--accent); background: var(--bg); font-weight: 600; }
#panel-memory .mem-radix { margin-left: 0; font-size: 10px; white-space: nowrap; }
#memory-body { display: flex; overflow: hidden; }
#panel-memory.collapsed #memory-body { display: none; }
.mem-main { display: flex; flex: 1; min-width: 0; min-height: 0; }
.mem-list { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
#memory-form { gap: 3px; align-items: center; margin: 0 6px 6px 10px; }
#address { min-width: 0; }
.mem-step svg, #mem-expand svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#memory { flex: 1; overflow: auto; min-height: 0; padding: 0 6px 12px 10px; }
.mem-label { display: flex; align-items: baseline; gap: 6px; margin: 7px 0 2px; padding-left: 2px; border-top: 1px dashed var(--line); padding-top: 4px; }
.mem-label button { padding: 0 !important; font: 600 11px var(--mono); color: var(--accent); }
.mem-label small { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.byte.word { min-width: 66px; }
#memory[data-view="text"] .mem-row { gap: 1px; }
#memory[data-view="text"] .byte { min-width: 13px; padding: 4px 1px; }
#memory[data-view="text"] .byte.escape { color: var(--muted); font-size: 8px; }
#memory[data-view="words"][data-radix="bin"] .byte.word { min-width: 0; font-size: 9px; }
/* The bar: 14px, segments not to scale, a ▶ at what the list shows. */
#memory-bar { position: relative; flex: 0 0 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px 8px 0; }
#mem-expand { padding: 1px !important; display: inline-flex; }
#mem-track { position: relative; flex: 1; width: 14px; display: flex; flex-direction: column; gap: 1px; min-height: 80px; }
#mem-track .seg { padding: 0 !important; border: 0; border-radius: 3px; width: 100%; min-height: 4px; cursor: pointer; }
#mem-track .seg:disabled { cursor: default; }
.seg-stack { background: color-mix(in srgb, var(--write) 45%, var(--panel)); }
.seg-free { background: repeating-linear-gradient(180deg, var(--line) 0 2px, transparent 2px 5px) !important; }
.seg-heap { background: color-mix(in srgb, var(--read) 45%, var(--panel)); }
.seg-data { background: color-mix(in srgb, var(--accent) 45%, var(--panel)); }
.seg-text { background: color-mix(in srgb, var(--muted) 45%, var(--panel)); }
#mem-track .seg:hover:not(:disabled) { filter: brightness(1.12); outline: 1px solid var(--accent); }
#mem-track .tick { position: absolute; left: -2px; right: -2px; height: 2px; pointer-events: none; }
.tick-sp { background: var(--write); }
.tick-pc { background: var(--text); }
#mem-track .view-mark { position: absolute; left: -11px; transform: translateY(-50%); font-size: 9px; line-height: 1; color: var(--accent); pointer-events: none; }
#memory-bar.empty #mem-track .seg { background: color-mix(in srgb, var(--muted) 35%, var(--panel)); cursor: help; }
.mem-empty { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 8px 2px; }
/* Open, the map takes the panel: the list and its views step aside. */
#memory-map { flex: 1; overflow: auto; min-width: 0; padding: 0 8px 12px 10px; font-size: 11px; }
#panel-memory.map-open .mem-list { display: none; }
/* The header keeps its size when the map opens; only its controls step aside. */
#panel-memory.map-open .mem-views, #panel-memory.map-open .mem-radix, .mem-radix.idle { visibility: hidden; }
#panel-memory.map-open #mem-expand svg { transform: scaleX(-1); }
.map-seg { border-left: 4px solid var(--seg, var(--line)); padding: 2px 0 4px 8px; margin-bottom: 4px; }
.map-seg h4 { margin: 2px 0 4px; font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.map-seg h4 small { font: 400 10px var(--mono); letter-spacing: 0; }
.map-stack { --seg: color-mix(in srgb, var(--write) 55%, var(--panel)); }
.map-heap { --seg: color-mix(in srgb, var(--read) 55%, var(--panel)); }
.map-data { --seg: color-mix(in srgb, var(--accent) 55%, var(--panel)); }
.map-text { --seg: color-mix(in srgb, var(--muted) 55%, var(--panel)); }
.map-free { margin: 0 0 4px; padding: 6px 0 6px 12px; color: var(--muted); font-size: 10px; border-left: 4px dotted var(--line); }
.map-item { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; text-align: left; padding: 4px 6px !important; border-radius: 5px; }
.map-item:hover { background: var(--bg); }
.map-item b { font: 600 11px var(--mono); }
.map-item small { color: var(--muted); font: 10px var(--mono); }
.map-saved { flex-basis: 100%; color: var(--muted); font: 10px var(--mono); overflow-wrap: anywhere; }
.map-arrow { margin-left: auto; color: var(--write); font: 600 10px var(--mono); }
.map-item, .map-saved { white-space: normal; }
.map-saved span { display: inline-block; margin-right: 10px; }
/* Buttons keep one look per kind (classroom 2026-11-05: the memory arrows
   and the map button did not read as buttons). Icon actions sit in a
   bordered group like the toolbar's; a command beside an input is filled
   like Send; a view switch marks the chosen one. */
.mem-steps { display: inline-flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); overflow: hidden; }
.mem-steps .mem-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 !important; border: 0; border-radius: 0; color: var(--text); }
.mem-steps .mem-step + .mem-step { border-left: 1px solid var(--line); }
.mem-steps .mem-step:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); }
#mem-go { background: var(--bg); border-color: var(--line); padding: 3px 10px; }
#mem-expand { width: 20px; height: 22px; align-items: center; justify-content: center; border: 1px solid var(--line) !important; border-radius: 5px; background: var(--bg); color: var(--text); }
#mem-expand:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); }
#mem-expand[aria-expanded="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important; }
#mem-expand:disabled { opacity: 0.45; }
#memory-bar { flex-basis: 24px; padding-right: 2px; }