:root {
  color-scheme: dark; --bg: #0b0b0b; --panel: #111110; --raised: #1c1c19;
  --line: #464640; --quiet: #2b2b27; --text: #d6d6ce; --muted: #96968d;
  --accent: #d7ae68; --red: #d88373; --mono: Menlo, "DejaVu Sans Mono", Consolas, monospace;
  font: 12px/1.5 var(--mono); background: var(--bg); color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; min-height: 420px; min-width: 720px; display: flex; flex-direction: column; overflow: hidden; }
button, input, select { font: inherit; border-radius: 0; }
button { border: 1px solid #5a5a52; background: #242421; color: var(--text); padding: 4px 9px; cursor: pointer; white-space: nowrap; }
button:hover:not(:disabled) { background: #3a3a34; border-color: #b7b7aa; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
input, select { background: #121211; border: 1px solid #53534d; color: var(--text); padding: 4px 6px; min-width: 0; }
input[type=checkbox] { accent-color: var(--accent); }
input[hidden] { display: none; }
.primary { background: var(--text); color: #111; border-color: var(--text); }
.primary:hover:not(:disabled) { background: #f4f4ea; }
.text-button { border: 0; padding: 0; background: transparent; color: var(--muted); text-align: left; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: .12em; }
h2 { font-size: 14px; font-weight: 500; }
.workbench-header { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 38px; padding: 6px 9px; border-bottom: 1px solid var(--line); background: #181816; font-size: 11px; }
.identity { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.identity h1 { font-size: 11px; letter-spacing: .06em; }
.machine-mark { display: flex; align-items: center; justify-content: center; width: 29px; height: 24px; border: 1px solid #828279; font-size: 11px; }
.machine-mark span { color: var(--accent); padding: 0 1px; }
.header-group { display: flex; align-items: center; gap: 4px; }
.workbench-header button, .workbench-header select { height: 26px; font-size: 11px; padding: 2px 8px; }
.workbench-header label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.buffer-controls label { color: var(--accent); }
.run-toggle { min-width: 51px; }
.run-toggle.running { color: var(--accent); border-color: var(--accent); }
#desktop { display: flex; flex: 1; min-width: 0; min-height: 0; padding: 6px; }
#desktop > .tile-frame { flex: 1; }
.minibuffer { flex: 0 0 28px; display: flex; align-items: center; gap: 13px; padding: 0 10px; border-top: 1px solid var(--line); background: #1b1b18; font-size: 10px; }
#focused-window { color: var(--accent); min-width: 55px; }
#status-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-help, #storage-state { color: var(--muted); white-space: nowrap; }
.boot-message { display: flex; flex-direction: column; gap: 16px; margin: auto; max-width: 70%; }
.tool-strip { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--quiet); font-size: 10px; color: var(--muted); }
.tool-strip strong { color: var(--text); font-weight: 400; white-space: nowrap; }
.empty-state { color: var(--muted); font-size: 10px; padding: 9px; }
.error-text { color: var(--red) !important; }
.editor-window { display: flex; flex-direction: column; overflow: hidden; }
.buffer-tabs { display: flex; flex: 0 0 32px; overflow: auto hidden; background: #161614; border-bottom: 1px solid var(--quiet); scrollbar-width: thin; }
.buffer-tab { display: flex; flex: 0 0 auto; border-right: 1px solid var(--quiet); border-bottom: 2px solid transparent; }
.buffer-tab.active { border-bottom-color: var(--accent); background: #24241e; }
.buffer-tab button { border: 0; background: transparent; font-size: 10px; padding: 5px 8px; color: var(--muted); }
.buffer-tab.active button { color: var(--text); }
.buffer-tab button.close-buffer { font-size: 13px; padding-left: 0; }
.buffer-path { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid #22221f; font-size: 10px; color: var(--muted); }
.buffer-path span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.buffer-path span:last-child { flex: 0 0 auto; font-size: 10px; }
.buffer-path .modified { color: var(--accent); }
.source-editor { flex: 1; min-height: 0; }
.editor-modeline { display: flex; justify-content: space-between; gap: 12px; padding: 4px 9px; font-size: 10px; border-top: 1px solid var(--quiet); background: #181815; color: var(--muted); }
.editor-modeline > * { white-space: nowrap; }
.editor-modeline button { font-size: inherit; }
.breakpoint-glyph { background: var(--accent); border-radius: 50%; width: 9px !important; height: 9px !important; margin: 6px 4px; }
.breakpoint-pending-glyph { border: 1px solid var(--accent); border-radius: 50%; width: 9px !important; height: 9px !important; margin: 6px 4px; }
.execution-line { background: #d7ae681b; }
.execution-arrow::before { content: '▶'; color: var(--accent); font-size: 11px; }
.files-window { display: flex; flex-direction: column; overflow: hidden; }
.file-actions { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; }
.file-actions button { font-size: 10px; padding: 3px 6px; }
.file-tree { flex: 1; min-height: 60px; overflow: auto; border-top: 1px solid var(--quiet); }
.file-row { display: flex; align-items: center; gap: 5px; width: 100%; border: 0; padding: 5px 8px; background: transparent; font-size: 10px; text-align: left; }
.file-row.selected { background: #292923; }
.file-row.active { color: var(--accent); }
.file-name { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.file-icon { color: var(--muted); width: 10px; flex: 0 0 10px; }
.file-mark { font-size: 10px; color: var(--muted); }
.file-details { flex: 0 0 auto; max-height: 45%; overflow: auto; border-top: 1px solid var(--line); background: #161614; }
.file-selection { font-size: 10px; padding: 8px 8px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-details > p { color: var(--muted); font-size: 10px; padding: 0 8px; }
.trash { border-top: 1px solid var(--quiet); font-size: 10px; }
.trash summary { padding: 6px 8px; cursor: pointer; }
.trash-row { display: flex; align-items: center; gap: 4px; padding: 4px 8px; }
.trash-row span { overflow-wrap: anywhere; flex: 1; font-size: 10px; }
.trash-row button { font-size: 10px; padding: 2px 4px; }
.listener-window { display: flex; flex-direction: column; overflow: hidden; background: #0e0e0d; }
.listener-log { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; }
.listener-entry { display: flex; gap: 10px; margin-bottom: 5px; align-items: baseline; font-size: 10px; }
.log-cycle { width: 58px; flex: 0 0 58px; text-align: right; color: #73736a; font-size: 10px; }
.listener-entry pre { font: inherit; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.listener-entry.error { color: var(--red); }
.listener-entry.command { color: var(--accent); }
.listener-prompt { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-top: 1px solid var(--quiet); background: #161613; }
.listener-prompt label { color: var(--accent); font-size: 10px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listener-prompt input { flex: 1; border: 0; padding: 2px 0; background: transparent; font-size: 11px; }
.trace-window, .machine-window, .tutorial-window { display: flex; flex-direction: column; overflow: hidden; }
.machine-stage { flex: 1; min-height: 70px; position: relative; margin: 9px; }
.machine-stage canvas { position: absolute; width: 100%; height: 100%; }
.machine-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 10px 6px; color: var(--muted); font-size: 10px; }
.machine-legend i { display: inline-block; width: 8px; height: 8px; border: 1px solid #66665c; margin-right: 4px; vertical-align: middle; }
.machine-legend .active { background: #3a382a; border-color: var(--accent); }
.machine-legend .selected-node { border-color: var(--accent); }
.machine-result { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px 2px; border-top: 1px solid var(--quiet); }
.machine-result-label { font-size: 10px; color: var(--muted); }
.machine-result-value { font-size: 22px; font-weight: 400; color: var(--muted); }
.machine-result.complete .machine-result-value { color: var(--accent); }
.machine-reason { padding: 2px 10px 8px; font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.tutorial-title { font-size: 15px; font-weight: 500; padding: 10px 12px 0; }
.tutorial-body { padding: 4px 12px 10px; }
.tutorial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--quiet); }
.tutorial-done { margin-left: auto; color: var(--accent); font-size: 11px; }
.trace-stage { flex: 1; min-height: 0; position: relative; margin: 9px; }
.trace-stage canvas { position: absolute; width: 100%; height: 100%; }
.debugger-window { display: flex; flex-direction: column; overflow: hidden; }
.debug-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 7px; border-bottom: 1px solid var(--quiet); }
.debug-toolbar button { font-size: 10px; padding: 3px 7px; }
.loaded-source { flex: 0 0 auto; padding: 5px 9px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.debug-status { display: flex; gap: 8px; align-items: baseline; padding: 5px 9px; font-size: 10px; border-bottom: 1px solid var(--quiet); }
.state-tag { color: var(--accent); font-size: 10px; }
.debug-scroll { flex: 1; min-height: 0; overflow: auto; }
.debug-options { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 9px; font-size: 10px; color: var(--muted); }
.debug-options label { display: flex; align-items: center; gap: 4px; }
.debug-options select { font-size: 10px; padding: 2px 4px; }
.debug-options input { margin: 0; }
.subheading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 10px; padding: 5px 9px; }
.subheading button { font-size: 10px; border: 0; background: transparent; padding: 0; }
.registers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 9px 8px; gap: 5px 12px; }
.register { min-width: 0; display: flex; flex-direction: column; font-size: 10px; color: var(--muted); }
.register strong { font-size: 10px; font-weight: 400; color: var(--text); }
.register strong.changed { color: var(--accent); }
.debug-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr)); border-top: 1px solid var(--quiet); }
.debug-section { min-width: 0; }
.debug-section + .debug-section { border-left: 1px solid var(--quiet); }
.compact-list { list-style: none; padding: 0 9px; margin: 2px 0 6px; font-size: 10px; }
.compact-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
.compact-list .empty-state { padding: 2px 0; font-size: 10px; }
.compact-list button { font-size: 10px; }
.inline-form { display: flex; gap: 4px; padding: 3px 9px 7px; }
.inline-form input { flex: 1; width: 65px; font-size: 10px; padding: 3px 4px; }
.inline-form button { font-size: 10px; padding: 3px 5px; }
.peek-result { display: flex; flex-wrap: wrap; gap: 4px 9px; padding: 0 9px 7px; font-size: 10px; }
.peek-result strong { font-weight: 400; }
.peek-result span { color: var(--muted); }
.problem-row { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; white-space: normal; border: 0; border-bottom: 1px solid var(--quiet); background: transparent; font-size: 11px; padding: 10px; }
.problem-location { color: var(--red); font-size: 10px; overflow-wrap: anywhere; }
.image-window { display: flex; flex-direction: column; overflow: hidden; }
.image-output { flex: 1; overflow: auto; font: 10px/1.6 var(--mono); padding: 10px; margin: 0; }
dialog { background: #191917; color: var(--text); border: 1px solid var(--accent); padding: 0; box-shadow: 0 14px 70px #000b; }
dialog::backdrop { background: #0009; }
.command-palette { width: min(680px, 88vw); margin-top: 13vh; }
.command-palette form { padding: 14px; border-bottom: 1px solid var(--line); }
.command-palette label { display: block; font-size: 10px; letter-spacing: .12em; }
.command-palette label span { float: right; color: var(--accent); }
.command-palette input { display: block; width: 100%; margin-top: 8px; font-size: 14px; padding: 8px; }
.palette-results { max-height: 48vh; overflow: auto; padding: 5px; }
.palette-results button { display: flex; flex-direction: column; gap: 3px; width: 100%; background: transparent; border: 0; padding: 9px 11px; text-align: left; }
.palette-results button[aria-selected=true] { background: #38382e; color: var(--accent); }
.palette-results small { font-size: 10px; color: var(--muted); }
.palette-group { padding: 10px 11px 4px; color: var(--accent); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.palette-results button[aria-disabled=true] { opacity: .55; }
.command-palette > p { padding: 8px 14px; font-size: 10px; color: var(--muted); border-top: 1px solid var(--line); }
.path-dialog { width: min(560px, 88vw); padding: 20px; }
.path-dialog label { display: block; margin-top: 20px; font-size: 10px; color: var(--muted); }
.path-dialog input { display: block; width: 100%; margin-top: 5px; padding: 8px; }
.dialog-error { color: var(--red); font-size: 11px; margin-top: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media (max-width: 1050px) { .key-help { display: none; } .editor-modeline { gap: 5px; font-size: 10px; } }
@media (max-width: 800px) { .workbench-header { column-gap: 8px; } }
.listener-mouse-help { flex: 0 0 auto; padding: 3px 10px; font-size: 10px; color: var(--muted); border-top: 1px solid #20201d; }
.listener-entry .presentation { display: inline; font: inherit; line-height: inherit; padding: 0; border: 0; border-bottom: 1px dotted #777767; background: transparent; color: inherit; white-space: pre-wrap; text-align: left; overflow-wrap: anywhere; }
.listener-entry .presentation:hover { color: var(--accent); background: #2d2d24; border-color: var(--accent); }
.build-window { display: flex; flex-direction: column; overflow: hidden; }
.build-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--quiet); }
.build-toolbar select { flex: 1 1 100%; font-size: 10px; }
.build-toolbar button { font-size: 10px; padding: 3px 6px; }
.build-summary { padding: 7px 9px; font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--quiet); overflow-wrap: anywhere; }
.build-targets { flex: 1; min-height: 0; overflow: auto; }
.build-target { padding: 9px; border-bottom: 1px solid var(--quiet); }
.build-target.selected { background: #282820; box-shadow: inset 2px 0 var(--accent); }
.build-target-heading { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.build-target-heading button { color: var(--text); white-space: normal; overflow-wrap: anywhere; }
.build-state { font-size: 10px; color: var(--accent); flex: 0 0 auto; }
.build-inputs { font-size: 10px; margin: 4px 0; color: var(--muted); overflow-wrap: anywhere; }
.build-inputs button { font-size: inherit; white-space: normal; }
.build-target-actions { display: flex; gap: 5px; margin-top: 7px; }
.build-target-actions button { font-size: 10px; padding: 2px 6px; }
.build-reason, .build-hint { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.build-hint { padding: 8px 9px; border-top: 1px solid var(--quiet); }
.build-workflow { padding: 5px 8px; border-bottom: 1px solid var(--quiet); font-size: 10px; color: var(--accent); }
.documentation-window { display: flex; flex-direction: column; min-width: 0; overflow: hidden; container-type: inline-size; }
.documentation-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 5px 7px; border-bottom: 1px solid var(--quiet); }
.documentation-toolbar button { font-size: 10px; padding: 2px 7px; }
.documentation-location { margin-left: 5px; font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documentation-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.documentation-index { display: flex; flex-direction: column; flex: 0 0 164px; min-height: 0; border-right: 1px solid var(--quiet); background: #141412; }
.documentation-index input { margin: 7px 7px 4px; width: calc(100% - 14px); font-size: 10px; }
.documentation-count { color: var(--muted); font-size: 10px; padding: 0 9px 5px; }
.documentation-topics { overflow: auto; flex: 1; min-height: 0; padding-bottom: 7px; }
.documentation-topic { display: block; padding: 5px 9px; border-left: 2px solid transparent; font-size: 10px; line-height: 1.4; text-decoration: none; }
.documentation-topic[aria-current=page] { color: var(--accent); border-left-color: var(--accent); background: #29271e; }
.documentation-window a, .tutorial-window a { color: var(--accent); text-underline-offset: 3px; }
.documentation-window a:hover, .tutorial-window a:hover { background: #353025; color: #f1d3a1; }
.documentation-page { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 15px 18px 30px; font: 11px/1.7 var(--mono); overflow-wrap: anywhere; scroll-behavior: auto; }
.documentation-page:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.documentation-page > h2 { font-size: 16px; color: var(--text); margin-bottom: 6px; }
.documentation-page h3 { font-size: 12px; font-weight: 500; color: var(--text); margin: 21px 0 7px; padding-bottom: 4px; border-bottom: 1px solid var(--quiet); }
.documentation-page p { margin: 9px 0; }
.documentation-summary { color: var(--muted); }
.documentation-contents { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0; font-size: 10px; }
.documentation-page ul, .documentation-page ol { padding-left: 20px; margin: 9px 0; }
.documentation-page li { margin: 5px 0; }
.documentation-page pre { overflow-x: auto; padding: 9px 11px; border: 1px solid var(--quiet); background: #0d0d0c; font: 10px/1.6 var(--mono); white-space: pre; }
.documentation-page code { font-family: var(--mono); color: #e0d0b4; }
.documentation-examples { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 8px 0 15px; }
.documentation-examples button { font-size: 10px; padding: 3px 6px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
@container (max-width: 460px) {
  .documentation-body { flex-direction: column; }
  .documentation-index { flex: 0 0 120px; border-right: 0; border-bottom: 1px solid var(--quiet); }
  .documentation-topics { display: flex; flex-wrap: wrap; align-content: flex-start; }
  .documentation-topic { padding: 4px 7px; }
  .documentation-page { padding: 12px; }
}
/* Network tools share selections and use stable physical coordinates. */
.network-window { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; overflow:hidden; }
.network-window .tool-strip { flex:none; display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:7px 9px; }
.network-window input,.network-window select { min-width:0; max-width:100%; font:inherit; }
.network-window .tool-strip input { flex:1; width:140px; }
.network-status { flex:none; padding:6px 10px; color:#aaa99f; font-size:10px; line-height:1.5; border-bottom:1px solid #30302b; overflow-wrap:anywhere; }
.packet-body { flex:1; display:grid; grid-template-columns:minmax(130px,.8fr) minmax(180px,1.2fr); min-height:0; overflow:hidden; }
.packet-list,.packet-details,.inspection-scroll,.event-list { overflow:auto; min-height:0; min-width:0; }
.packet-list { border-right:1px solid #30302b; }
.packet-row,.event-row { display:block; width:100%; text-align:left; padding:8px 10px; border:0; border-bottom:1px solid #282824; background:transparent; font-size:10px; overflow-wrap:anywhere; white-space:normal; }
.packet-row[aria-selected=true],.event-row[aria-selected=true] { background:#393327; color:#efc988; box-shadow:inset 2px 0 #d7ae68; }
.packet-details,.inspection-scroll { padding:10px; flex:1; }
.packet-details h3,.inspection-scroll h3 { font-size:12px; margin:3px 0 10px; color:#deddd1; }
.packet-details h4 { font-size:10px; margin:14px 0 7px; color:#aaa99f; text-transform:uppercase; }
.inspection-fields { display:grid; grid-template-columns:minmax(100px,1fr) minmax(70px,1fr); gap:5px 12px; font-size:10px; line-height:1.5; }
.inspection-fields dt { color:#98988e; }.inspection-fields dd { margin:0; overflow-wrap:anywhere; }
.network-window details { padding:7px; border-top:1px solid #373730; font-size:10px; }
.network-window summary { cursor:pointer; color:#d2d1c5; padding:3px 0; }
.packet-details details[open] { max-height:260px; overflow:auto; }
.word-row { font:10px/1.65 Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.network-breakpoints { flex:none; max-height:180px; overflow:auto; }
.network-breakpoints .inline-form { display:flex; flex-wrap:wrap; gap:5px; }
.network-breakpoints input { flex:1; width:130px; }
.breakpoint-row { display:flex; align-items:center; gap:8px; padding:3px; }
.breakpoint-row .text-button { text-align:left; white-space:normal; }
.wait-row { padding:8px 0; border-bottom:1px solid #30302b; font-size:11px; line-height:1.5; }
.wait-row p { margin:0 0 6px; }.wait-row button { margin-right:8px; }
.geometry-stage { flex:1; min-height:90px; overflow:hidden; position:relative; }
.geometry-stage svg { width:100%; height:100%; display:block; }
.mesh-link { stroke:#393932; }.traffic-link { stroke:#7b817b; opacity:.7; }
.expected-link { stroke:#d7ae68; stroke-dasharray:5 4; opacity:.7; }.packet-link { stroke:#e5b45d; }
.stall-link { stroke:#e77f6c; }.selected-link { stroke:#f1e4b5; }
.mesh-node { cursor:pointer; }.mesh-node circle { fill:#797a70; stroke:#141413; stroke-width:1; }
.mesh-node.selected circle { fill:#f1c777; stroke:#fff5db; stroke-width:2; }
.mesh-node text,.slice-label { fill:#babaae; font:12px Menlo,monospace; }
.mesh-node.selected text { fill:#f1c777; }
.event-list { flex:1; }.network-window input[type=range] { margin:9px 12px; width:calc(100% - 24px); flex:none; accent-color:#d7ae68; }
.route-hops { display:flex; flex-wrap:wrap; gap:7px; font-size:10px; }
.display-stage { flex:1; min-height:0; overflow:auto; display:grid; place-items:center; background:#0a0c10; }
.display-stage canvas { image-rendering:pixelated; height:auto; max-width:none; border:1px solid #404039; }
.pixel-inspection { padding:8px 10px; font-size:10px; color:#d7ae68; min-height:28px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:2px solid #e9bd72; outline-offset:-2px; }
@media(max-width:650px) { .packet-body { display:flex; flex-direction:column; }.packet-list { max-height:38%; flex-shrink:0; }.packet-details { flex:1; } }

/* Root-of-trust workbench */
:root { --green: #9fc98a; }
.danger { color: var(--red); border-color: #7a4a40; }
.danger:hover:not(:disabled) { background: #3b2420; border-color: var(--red); }
.workbench-header input[type=number] { width: 56px; height: 26px; font-size: 11px; padding: 2px 5px; }
.platform-state { color: var(--accent); white-space: nowrap; }
.rv-registers { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.rv-csrs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.memory-dump { margin: 0; padding: 4px 9px 9px; font: 10px/1.55 var(--mono); white-space: pre; overflow-x: auto; color: var(--text); }
.debug-section .inline-form select { min-width: 0; max-width: 110px; }

.boot-window { display: flex; flex-direction: column; overflow: hidden; }
.boot-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.boot-pipeline { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 4px; }
.boot-stage { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border: 1px solid var(--quiet); background: #141412; min-width: 0; }
.boot-stage strong { font-weight: 500; font-size: 10px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boot-stage-state { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.boot-stage.active { border-color: var(--accent); background: #2a2519; }
.boot-stage.active .boot-stage-state { color: var(--accent); }
.boot-stage.done { border-color: #4f6145; background: #172015; }
.boot-stage.done .boot-stage-state { color: var(--green); }
.boot-stage.failed { border-color: var(--red); background: #3b2420; }
.boot-stage.failed .boot-stage-state { color: var(--red); }
.boot-verdict { margin: 0 10px; padding: 8px 10px; border-left: 3px solid var(--line); background: #171715; font-size: 11px; }
.boot-verdict.good { border-left-color: var(--green); color: var(--green); }
.boot-verdict.bad { border-left-color: var(--red); color: var(--red); }
.boot-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 10px; font-size: 10px; }
.boot-facts dt { color: var(--muted); }
.boot-facts dd { margin: 0; overflow-wrap: anywhere; }
.boot-facts dd.match { color: var(--green); }
.boot-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px 10px; }
.boot-fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; padding: 6px 8px 8px; border: 1px solid var(--quiet); font-size: 10px; }
.boot-fieldset legend { color: var(--muted); padding: 0 4px; font-size: 9px; letter-spacing: .08em; }
.boot-fieldset label { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.boot-fieldset button, .boot-fieldset select, .boot-fieldset input { font-size: 10px; padding: 2px 6px; }
.boot-events { list-style: none; margin: 0; padding: 0 10px 10px; font-size: 10px; flex: 1 0 120px; overflow: auto; }
.boot-event { display: grid; grid-template-columns: 78px 92px minmax(0, 1fr); gap: 8px; padding: 2px 0; border-bottom: 1px solid #1d1d1a; }
.boot-event-cycle { color: var(--muted); text-align: right; }
.boot-event strong { font-weight: 400; color: var(--text); }
.boot-event.good strong { color: var(--green); }
.boot-event.bad strong { color: var(--red); }
.boot-event span:last-child { overflow-wrap: anywhere; color: var(--muted); }

.console-window { display: flex; flex-direction: column; overflow: hidden; }
.console-output { flex: 1; min-height: 0; margin: 0; padding: 10px; overflow: auto; font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: #0c0c0b; color: #e2e2d8; }
.board-io { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--quiet); font-size: 10px; }
.board-label { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.leds { display: flex; gap: 4px; }
.led { width: 11px; height: 11px; border-radius: 50%; background: #2a1f14; border: 1px solid #4a3a26; }
.led.on { background: var(--accent); border-color: #f0d49b; box-shadow: 0 0 6px var(--accent); }
.board-buttons { display: flex; gap: 4px; }
.board-buttons button { font-size: 9px; padding: 2px 6px; }
.board-buttons button.pressed { background: var(--accent); color: #111; }

.listing-window { display: flex; flex-direction: column; overflow: hidden; }
.listing-window .tool-strip label { display: flex; align-items: center; gap: 4px; }
.listing-body { flex: 1; min-height: 0; overflow: auto; font: 10px/1.6 var(--mono); padding: 6px 0; }
.listing-row { display: grid; grid-template-columns: 70px 70px minmax(0, 1fr); gap: 10px; padding: 0 10px 0 18px; cursor: pointer; white-space: nowrap; position: relative; }
.listing-row:hover { background: #1d1d1a; }
.listing-row.current { background: #3a3424; color: #fff; }
.listing-row.current::before { content: '▶'; position: absolute; left: 5px; color: var(--accent); }
.listing-row.breakpoint::after { content: ''; position: absolute; left: 7px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.listing-row.current.breakpoint::after { display: none; }
.listing-address { color: var(--muted); }
.listing-word { color: #6f6f68; }
.listing-symbol { color: var(--accent); padding: 6px 10px 1px; }
.listing-source { color: #8a9a80; padding: 0 10px 0 18px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }

.display-window { display: flex; flex-direction: column; overflow: hidden; }
.display-window .display-stage canvas { width: min(100%, 512px); }

.board-window { display: flex; flex-direction: column; overflow: hidden; }
.board-stage { flex: 1; min-height: 0; overflow: auto; padding: 6px 8px; display: grid; place-items: center; }
.board-stage svg { width: 100%; height: 100%; max-height: 100%; font-family: var(--mono); }
.board-status { padding: 5px 10px; border-top: 1px solid var(--quiet); font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-chip { fill: #12120f; stroke: #6b6b62; stroke-width: 1.5; stroke-dasharray: 6 3; }
.board-caption { fill: var(--muted); font-size: 10px; letter-spacing: .06em; }
.board-block rect { fill: #181816; stroke: #4c4c45; stroke-width: 1; transition: fill .15s, stroke .15s; }
.board-block.hot rect { stroke: var(--accent); fill: color-mix(in srgb, #3a3020 calc(var(--heat) * 100%), #181816); }
.board-block:focus { outline: none; }
.board-block:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
.board-label { fill: var(--text); font-size: 10px; letter-spacing: .05em; }
.board-sub { fill: var(--muted); font-size: 8.5px; }
.board-value { fill: var(--accent); font-size: 9.5px; }
.board-block.locked rect { stroke: #8a8a7f; }
.board-block.trusted rect, .board-block.done rect { stroke: var(--green); }
.board-block.trusted .board-value, .board-block.done .board-value { fill: var(--green); }
.board-block.busy rect { stroke: var(--accent); stroke-dasharray: 4 2; animation: board-dash .6s linear infinite; }
.board-block.failed rect { stroke: var(--red); fill: #2c1a17; }
.board-block.failed .board-value { fill: var(--red); }
.board-block.idle .board-label { fill: var(--muted); }
.board-link { fill: none; stroke: #34342f; stroke-width: 1.5; }
.board-link.hot { stroke: var(--accent); stroke-width: calc(1.5px + var(--heat) * 3px); stroke-dasharray: 5 4; animation: board-dash .5s linear infinite; }
.board-irq { fill: none; stroke: transparent; stroke-width: 1.5; stroke-dasharray: 2 3; }
.board-irq.hot { stroke: var(--red); }
.board-led { fill: #2a1f14; stroke: #4a3a26; }
.board-led.on { fill: var(--accent); stroke: #f0d49b; filter: drop-shadow(0 0 3px var(--accent)); }
.board-key-group { cursor: pointer; }
.board-key { fill: #242421; stroke: #5a5a52; }
.board-key.pressed { fill: var(--accent); }
.board-key-label { fill: var(--text); font-size: 10px; pointer-events: none; }
.board-thumb { image-rendering: pixelated; }
.board-tamper { cursor: pointer; }
.board-tamper rect { fill: #2a1916; stroke: #7a4a40; }
.board-tamper .board-label { fill: var(--red); }
@keyframes board-dash { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) { .board-link.hot, .board-block.busy rect { animation: none; } }