:root {
  --bg: #16181d;
  --panel: #1d2026;
  --panel-2: #23272e;
  --line: #30353e;
  --text: #d7dae0;
  --muted: #8b92a0;
  --accent: #5fb3f9;
  --pass: #5cc98a;
  --fail: #f2707a;
  --warn: #e8c26a;
  --added: rgba(92, 201, 138, .13);
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --results-h: 42%;
}

* { box-sizing: border-box; }
/* On a desktop the page is an app: it fills the window and each panel scrolls on its own. Phones get a
   normal scrolling page instead (see the end of this file). */
html, body { height: 100%; margin: 0; overflow: hidden; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  display: flex;
  flex-direction: column;
}
code, pre { font-family: var(--mono); font-size: 13px; }
button { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }

button.plain, .buttons button, .solution-banner button, .solution-box button, .next button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
}
.buttons button:hover, .solution-banner button:hover, .solution-box button:hover { border-color: var(--muted); }

/* Top bar */
.top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { font-weight: 600; white-space: nowrap; }
.brand span { color: var(--muted); font-weight: 400; }
.toolchain { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; min-width: 0; }
.toolchain .bar { width: 120px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; flex: none; }
.toolchain .bar div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.toolchain.ready .bar { display: none; }
#toolchain-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run {
  background: var(--accent);
  color: #0b1a29;
  border: 0;
  border-radius: 6px;
  padding: 7px 16px;
  font-weight: 600;
  cursor: pointer;
}
.run:disabled { opacity: .45; cursor: default; }

/* Layout */
.layout { flex: 1; display: grid; grid-template-columns: min(var(--lesson-w, 460px), calc(100% - 365px)) 5px minmax(0, 1fr); min-height: 0; }
.lesson { overflow-y: auto; background: var(--panel); min-width: 0; }
.work { display: grid; grid-template-rows: 1fr 5px var(--results-h); min-width: 0; min-height: 0; }
.splitter { background: var(--line); cursor: row-resize; touch-action: none; }
.splitter-v { cursor: col-resize; }
.splitter:hover, .splitter.dragging { background: var(--accent); }

/* Steps */
.steps { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.steps h3 { margin: 10px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.steps h3:first-child { margin-top: 0; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.steps li button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--muted);
}
.steps li button:hover { background: var(--panel-2); }
.steps li.current button { background: var(--panel-2); color: var(--text); }
.steps .mark {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  font-size: 10.5px;
}
.steps li.passed .mark { background: var(--pass); border-color: var(--pass); color: #0d2417; }

.body { padding: 4px 20px 28px; }
.body h2 { font-size: 18px; margin: 16px 0 8px; }
.body h4 { margin: 18px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.body pre { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow-x: auto; }
.body code { color: #f0c987; }
.body pre code { color: inherit; }
.body ul, .body ol { padding-left: 20px; }
.body li { margin: 4px 0; }
.body table { border-collapse: collapse; margin: 6px 0; }
.body th, .body td { text-align: left; padding: 3px 12px 3px 0; vertical-align: top; }
.body th { font-family: var(--mono); color: var(--accent); font-weight: 500; }
.body table.grid th, .body table.grid td { border-bottom: 1px solid var(--line); padding: 4px 10px; }
.body table.grid th { color: var(--muted); font-family: var(--sans); }
.body .note { border-left: 3px solid var(--accent); padding: 2px 12px; color: var(--muted); }
.body figure { margin: 10px 0; overflow-x: auto; }
.body figure svg { width: 100%; min-width: 360px; height: auto; display: block; }

.solution-box { margin-top: 24px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.solution-box h4 { margin: 0 0 4px; }
.solution-box p { margin: 0 0 10px; color: var(--muted); }
.solution-box .buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.next { margin-top: 16px; }
.next button { background: var(--pass); color: #0d2417; border-color: var(--pass); font-weight: 600; }

/* Tabs */
.tabs { display: flex; align-items: center; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--panel); min-height: 36px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px 6px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.tabs .spacer, .solution-banner .spacer { flex: 1; }
.tabs .subtle { font-size: 12px; }
.tabs .ro { font-size: 11px; color: var(--muted); margin-left: 4px; }
.badge { font-size: 11px; background: var(--line); border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.badge.error { background: var(--fail); color: #2b0c0f; }
.timing { color: var(--muted); font-size: 12px; padding-right: 8px; white-space: nowrap; }

/* Editor */
.editor-pane { display: flex; flex-direction: column; min-height: 0; }
.editor { flex: 1; min-height: 0; }
.editor .CodeMirror { height: 100%; font-family: var(--mono); font-size: 13.5px; background: var(--bg); }
.editor .CodeMirror-gutters { background: var(--bg); }
.cm-error-line { background: rgba(242, 112, 122, .14); }
.cm-warning-line { background: rgba(232, 194, 106, .10); }
.cm-added-line { background: var(--added); }
.solution-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #1f3326;
  border-bottom: 1px solid #2f5a3e;
  font-size: 13px;
}
.solution-banner button { padding: 3px 10px; font-size: 12.5px; }
.notice {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.notice button { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.notice .spacer { flex: 1; }

/* Results */
.results-pane { display: flex; flex-direction: column; min-height: 0; }
.panel { flex: 1; overflow: auto; margin: 0; padding: 12px 16px; background: var(--bg); }
pre.panel { white-space: pre-wrap; }
.hint { color: var(--muted); margin: 0; }

.summary { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.summary .big { font-size: 16px; font-weight: 600; }
.pass { color: var(--pass); }
.fail { color: var(--fail); }
.warn { color: var(--warn); }

.suite { margin-bottom: 14px; }
.suite-head { display: flex; gap: 10px; font-weight: 600; margin-bottom: 4px; }
.suite-head .count { font-weight: 400; color: var(--muted); }

details.op { border: 1px solid var(--line); border-radius: 6px; margin: 4px 0; background: var(--panel); }
details.op summary { cursor: pointer; padding: 5px 10px; display: flex; gap: 12px; align-items: baseline; list-style: none; }
details.op summary::-webkit-details-marker { display: none; }
details.op summary::before { content: "▸"; color: var(--muted); }
details.op[open] summary::before { content: "▾"; }
details.op .opcode { font-family: var(--mono); color: var(--muted); min-width: 28px; }
details.op .mn { font-family: var(--mono); font-weight: 600; min-width: 110px; }
details.op .detail { padding: 4px 12px 12px 30px; }
.more { color: var(--muted); margin: 6px 0 0; }

table.state { border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; margin-top: 6px; }
table.state th, table.state td { padding: 2px 14px 2px 0; text-align: left; white-space: nowrap; }
table.state th { color: var(--muted); font-weight: 400; }
table.state td.bad { color: var(--fail); font-weight: 600; }
.flagbits span { display: inline-block; min-width: 1.4em; padding: 0 .15em; text-align: center; color: #4a505b; cursor: help; }
.flagbits span.on { color: var(--text); }
td.bad .flagbits span.diff { background: rgba(242, 112, 122, .25); color: var(--fail); border-radius: 2px; }
.explain { margin: 4px 0; color: var(--muted); }
.explain b { color: var(--text); font-weight: 600; }
.swatch { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--muted); margin-right: 4px; vertical-align: -1px; }

.trace-lines { font-family: var(--mono); font-size: 12.5px; margin: 6px 0; }
.trace-lines div { color: var(--muted); white-space: pre; }
.trace-lines div.here { color: var(--fail); font-weight: 600; }
.console-out { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 4px 0 8px; white-space: pre-wrap; }

.shots { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.shots figure { margin: 0; }
.shots figcaption { color: var(--muted); font-size: 12px; text-align: center; }
canvas.shot { width: 224px; height: 256px; image-rendering: pixelated; border: 1px solid var(--line); background: #000; display: block; }

.diag { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; margin: 0; }
.diag a { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* Screen */
.screen-panel { display: flex; }
.screen-main { display: flex; gap: 20px; align-items: flex-start; width: 100%; height: 100%; }
.screen-stage { position: relative; height: 100%; flex: none; }
#screen {
  height: 100%;
  max-height: 512px;
  aspect-ratio: 224 / 256;
  image-rendering: pixelated;
  background: #000;
  border: 1px solid var(--line);
  display: block;
  outline: none;
}
#screen:focus { border-color: var(--accent); }
.screen-msg, .screen-focus {
  position: absolute; left: 8px; right: 8px; top: 8px;
  background: rgba(22, 24, 29, .92);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}
.screen-msg { color: var(--fail); }
.screen-focus { top: auto; bottom: 8px; color: var(--muted); text-align: center; pointer-events: none; }
.screen-side { display: flex; flex-direction: column; gap: 10px; min-width: 220px; max-width: 320px; }
.screen-side .buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); }
.field select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 10px; display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
legend { color: var(--muted); font-size: 12px; padding: 0 4px; }
dl.keys { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12.5px; }
dl.keys dt { font-family: var(--mono); color: var(--accent); }
dl.keys dd { margin: 0; color: var(--muted); }

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lesson { max-height: 40vh; border-bottom: 1px solid var(--line); }
  .splitter-v { display: none; }
  .toolchain .bar { display: none; }
  /* The top bar has to fit a phone: drop the course name and the compiler status. */
  #brand-course, #toolchain-text, .wide-only { display: none; }
}

/* Sound and file checks in the Screen tab */
.sound-lights { display: flex; flex-wrap: wrap; gap: 4px; }
.sound-lights .light {
  font-size: 11px; padding: 1px 6px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--muted);
  transition: background .1s, color .1s;
}
.sound-lights .light.on { background: var(--warn); border-color: var(--warn); color: #2b2205; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
details.files { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 8px; }
details.files summary { cursor: pointer; color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
table.checks { border-collapse: collapse; font-size: 12px; margin: 6px 0 4px; }
table.checks th { text-align: left; color: var(--muted); font-weight: 400; padding: 1px 10px 1px 0; }
table.checks td { padding: 1px 10px 1px 0; white-space: nowrap; }
#rom-status p, #sound-status p { font-size: 12.5px; margin: 4px 0 0; }

/* Account */
.account { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.account .user { display: flex; align-items: center; gap: 8px; }
.account img { border-radius: 50%; }
.account .subtle { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; text-decoration: underline; }
.account button.plain { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.sync-status { color: var(--muted); font-size: 12px; }
.sync-status.error { color: var(--warn); }

/* ---------------------------------------------------------------- site */
a.brand { color: inherit; text-decoration: none; }
a.brand:hover span { color: var(--text); }
body.home-view .toolchain, body.home-view #run, body.home-view #share-button { visibility: hidden; }
body.home-view .top { justify-content: space-between; }
a.run { display: inline-block; text-decoration: none; }

.home { flex: 1; overflow-y: auto; padding: 0 20px 60px; }
.home > section { max-width: 920px; margin: 0 auto; }
.hero { padding: 56px 0 28px; }
.hero h1 { font-size: 34px; line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.01em; }
.lede { font-size: 17px; color: var(--muted); max-width: 720px; margin: 0 0 18px; }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; padding: 8px 0 24px; }
.how > div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.how h4 { margin: 0 0 6px; }
.how p { margin: 0; color: var(--muted); font-size: 13.5px; }
.courses h2, .faq h2 { font-size: 20px; margin: 24px 0 12px; }
.course-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; max-width: 620px; }
.course-card h3 { margin: 2px 0 8px; font-size: 20px; }
.course-card p { margin: 0 0 8px; }
.course-meta { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 12px 0 4px; max-width: 320px; }
.progress div { height: 100%; background: var(--pass); }
.course-card .run { margin-top: 10px; }
.faq { color: var(--text); }
.faq h4 { margin: 18px 0 4px; }
.faq p { margin: 0; color: var(--muted); max-width: 720px; }

/* Reading pages: no editor, the text gets the room */
body.reading .layout { grid-template-columns: 1fr; }
body.reading .work, body.reading .splitter-v { display: none; }
body.reading .lesson { display: grid; grid-template-columns: minmax(230px, 280px) 1fr; border-right: 0; overflow: hidden; }
body.reading .steps { border-bottom: 0; border-right: 1px solid var(--line); overflow-y: auto; }
/* The whole column scrolls, so the scrollbar is at the window's edge; the right padding keeps lines 820px wide. */
body.reading .body { overflow-y: auto; padding: 8px max(40px, calc(100% - 860px)) 48px 40px; font-size: 15px; }
body.reading .body figure svg { min-width: 0; }

.step-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.steps li a { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 6px; padding: 4px 8px; color: var(--muted); text-decoration: none; }
.steps li a:hover { background: var(--panel-2); }
.steps li.current a { background: var(--panel-2); color: var(--text); }
.steps li.passed .mark { background: var(--pass); border-color: var(--pass); color: #0d2417; }
.steps li.page .mark { border-style: dotted; }
.cm-focus-line { background: rgba(232, 194, 106, .18); }
ul.problems { margin: 6px 0; padding-left: 18px; }
ul.problems li { margin: 4px 0; }
.warn-line { color: var(--warn); }

/* Figures: click to enlarge */
.body figure { cursor: zoom-in; }
.body figure canvas.shot { width: 224px; height: 256px; }
.body figcaption { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.lightbox { position: fixed; inset: 0; background: rgba(10, 11, 14, .88); display: grid; place-items: center; z-index: 50; padding: 24px; cursor: zoom-out; }
.lightbox figure { margin: 0; width: min(1100px, 100%); max-height: 100%; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.lightbox figure svg { width: 100%; min-width: 0; height: auto; }
.lightbox canvas.shot { width: min(448px, 80vw); height: auto; aspect-ratio: 224 / 256; }

/* Sharing */
.popover { position: fixed; top: 52px; right: 16px; width: 380px; max-width: calc(100vw - 32px); z-index: 40; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.popover h4 { margin: 10px 0 6px; font-size: 13px; }
.popover-head { display: flex; align-items: center; justify-content: space-between; }
.popover-head h4 { margin: 0; }
.popover .hint { font-size: 12.5px; margin-bottom: 8px; }
.popover .subtle { background: none; border: 0; color: var(--muted); cursor: pointer; }
.share-result { display: flex; gap: 6px; margin-top: 8px; }
.share-result input { flex: 1; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: 12.5px var(--mono); }
.share-list { list-style: none; padding: 0; margin: 0; font-size: 12.5px; max-height: 200px; overflow-y: auto; }
.share-list li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); }
.share-list li a { color: var(--accent); }
.share-list .subtle { margin-left: auto; text-decoration: underline; }
.share-banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #2a2440; border-bottom: 1px solid #463d6b; font-size: 13px; }
.share-banner .spacer { flex: 1; }
.popover button.plain, .share-banner button.plain, .account button.plain { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; cursor: pointer; }

/* ---------------------------------------------------------------- diagrams */
svg.dg { display: block; width: 100%; height: auto; }
.dg text { font-family: var(--sans); fill: var(--text); font-size: 13px; }
.dg text.muted { fill: var(--muted); }
.dg text.mono { font-family: var(--mono); }
.dg text.small { font-size: 11px; }
.dg text.big { font-size: 15px; font-weight: 600; }
.dg text.mid { text-anchor: middle; }
.dg text.end { text-anchor: end; }
.dg text.accent { fill: var(--accent); }
.dg text.green { fill: var(--pass); }
.dg text.warn { fill: var(--warn); }
.dg .box { fill: var(--panel-2); stroke: var(--line); stroke-width: 1.2; }
.dg .box-accent { fill: rgba(95, 179, 249, .14); stroke: var(--accent); stroke-width: 1.5; }
.dg .box-green { fill: rgba(92, 201, 138, .14); stroke: var(--pass); stroke-width: 1.5; }
.dg .box-warn { fill: rgba(232, 194, 106, .14); stroke: var(--warn); stroke-width: 1.5; }
.dg .box-dim { fill: var(--bg); stroke: var(--line); stroke-dasharray: 4 3; }
.dg .line { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.dg .bus-addr { stroke: var(--accent); stroke-width: 5; fill: none; }
.dg .bus-data { stroke: var(--pass); stroke-width: 5; fill: none; }
.dg .bus-io { stroke: var(--warn); stroke-width: 4; fill: none; }
.dg .fill-accent { fill: var(--accent); }
.dg .fill-muted { fill: var(--muted); }
.dg .fill-green { fill: var(--pass); }
.dg .fill-warn { fill: var(--warn); }
.dg .lit { fill: #e8eaf0; }
.dg .dark { fill: #0b0c0f; stroke: var(--line); }
table.optable { border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
table.optable th, table.optable td { border: 1px solid var(--line); padding: 2px 5px; text-align: center; }
table.optable th { color: var(--muted); font-weight: 400; }
table.optable td.hl { background: rgba(95, 179, 249, .18); color: var(--text); }
table.optable td.halt { color: var(--warn); }

/* Figures with a canvas and a legend beside it */
.fig-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 220px; }
.legend li { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.swatch { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 3px; border: 1px solid var(--line); }

/* Instruction categories, for the opcode table and the instruction cards */
.cat-control { --cat: rgba(242, 112, 122, .2); --cat-line: #f2707a; }
.cat-jump { --cat: rgba(240, 150, 80, .2); --cat-line: #f0965a; }
.cat-load8 { --cat: rgba(95, 179, 249, .17); --cat-line: #5fb3f9; }
.cat-load16 { --cat: rgba(176, 140, 240, .2); --cat-line: #b08cf0; }
.cat-alu8 { --cat: rgba(92, 201, 138, .17); --cat-line: #5cc98a; }
.cat-alu16 { --cat: rgba(232, 194, 106, .2); --cat-line: #e8c26a; }
.cat-flag { --cat: rgba(139, 146, 160, .18); --cat-line: #8b92a0; }

/* Anything with an instruction card */
.op-ref { cursor: help; }
code.op-ref { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
code.op-ref:hover, code.op-ref:focus-visible { text-decoration-color: var(--accent); outline: none; }
.optable td.op-ref:hover, .optable td.op-ref:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }

/* The opcode table appendix */
body.reading .body:has(.opgrid) { padding-right: max(40px, calc(100% - 1260px)); }
.opgrid-wrap { overflow-x: auto; margin: 12px 0; }
table.opgrid { border-collapse: collapse; font-family: var(--mono); font-size: 11px; line-height: 1.35; }
table.opgrid th { color: var(--muted); font-weight: 400; padding: 2px 4px; }
table.opgrid td { background: var(--cat); border: 1px solid var(--line); padding: 3px 4px; min-width: 66px; vertical-align: top; }
table.opgrid td:hover, table.opgrid td:focus-visible { outline: 2px solid var(--cat-line); outline-offset: -2px; }
table.opgrid td.unused { background: transparent; }
.opgrid .t, .opgrid-key .t { display: block; white-space: nowrap; color: var(--text); }
.opgrid .lc, .opgrid-key .lc { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); }
.opgrid .fl, .opgrid-key .fl { display: block; color: var(--muted); white-space: nowrap; min-height: 1.35em; font-size: 10px; }
.opgrid-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin: 6px 0 14px; }
.opgrid-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 3px; background: var(--cat); border: 1px solid var(--cat-line); }
.opgrid-key { display: flex; gap: 18px; align-items: flex-start; }
.opgrid-key .cell { background: var(--cat); border: 1px solid var(--line); padding: 3px 4px; font: 11px/1.35 var(--mono); min-width: 66px; }
.opgrid-key ul { margin: 0; padding-left: 18px; font-size: 13px; }
.opgrid-key li { margin: 0 0 4px; }

/* The instruction card */
.op-card { position: fixed; z-index: 50; width: 340px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-size: 13px; line-height: 1.45; overflow: hidden; }
.op-card .head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 7px 12px; background: var(--cat); border-bottom: 1px solid var(--cat-line); font-family: var(--mono); }
.op-card .head b { font-size: 14px; }
.op-card .hex { color: var(--muted); font-size: 12px; }
.op-card .name { padding: 8px 12px 0; font-weight: 600; }
.op-card p { margin: 4px 12px 6px; }
.op-card p.note { color: var(--muted); font-size: 12px; }
.op-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 12px; }
.op-card dt { color: var(--muted); }
.op-card dd { margin: 0; }
.op-card dd.mono { font-family: var(--mono); }
.op-card .flags span { display: inline-block; min-width: 20px; padding: 0 3px; text-align: center; cursor: help; margin-right: 2px; border-radius: 3px; font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid var(--line); }
.op-card .flags span.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.op-card .flags em { color: var(--muted); font-style: normal; margin-left: 6px; }
.op-card .step { padding: 6px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* A flag's meaning, over the card's flags and the flags in test results */
.flag-tip { position: fixed; z-index: 60; max-width: 280px; background: var(--panel-2); border: 1px solid var(--muted); border-radius: 6px; padding: 6px 9px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); pointer-events: none; }
.flag-tip b { font-family: var(--mono); color: var(--accent); }

/* Byline and community link */
.site-footer { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* Reading pages on narrow screens: like the steps, the text goes under the list of steps, and the whole
   column scrolls as one. */
@media (max-width: 800px) {
  /* Phones: the document scrolls, like an ordinary web page. Phone browsers measure the screen wrongly
     at load for a page that sizes itself to the window (iPhone left an empty band under it until the
     page was scrolled), and they hide their toolbars only when the document scrolls. */
  html, body { height: auto; overflow: visible; }
  body { min-height: 100%; }
  .top { position: sticky; top: 0; z-index: 30; }
  .home { flex: none; overflow: visible; }
  .layout { display: block; }
  /* A step fits one screen, as on a desktop: the lesson in a short scrolling box, then the editor and the
     results. svh is the screen's height with the browser's toolbars showing, which, unlike 100% or dvh,
     browsers know correctly at load. */
  body[data-view="course"]:not(.reading) { height: 100svh; }
  body[data-view="course"]:not(.reading) .layout { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
  /* A reading page: the list of steps, then the text. */
  body.reading .lesson { display: block; max-height: none; overflow: visible; }
  body.reading .steps { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  body.reading .body, body.reading .body:has(.opgrid) { overflow: visible; padding: 8px 16px 48px; }
}

#run { white-space: nowrap; }