:root {
  --bg: oklch(74% 0.012 205);
  --surface: oklch(87% 0.008 205);
  --surface-2: oklch(81% 0.01 205);
  --surface-3: oklch(78% 0.012 205);
  --line: oklch(70% 0.012 205);
  --line-dark: oklch(50% 0.018 210);
  --text: oklch(25% 0.015 220);
  --muted: oklch(43% 0.015 215);
  --blue: oklch(48% 0.115 250);
  --blue-deep: oklch(38% 0.09 250);
  --blue-soft: oklch(92% 0.03 245);
  --blue-active: oklch(78% 0.09 245);
  --red: oklch(52% 0.115 30);
  --red-deep: oklch(43% 0.09 30);
  --red-soft: oklch(85% 0.045 28);
  --red-light: oklch(78% 0.08 30);
  --green: oklch(45% 0.09 155);
  --green-soft: oklch(85% 0.04 155);
  --head: oklch(92% 0.035 245);
  --editor-bg: oklch(23% 0.015 220);
  --editor-surface: oklch(28% 0.016 220);
  --editor-surface-2: oklch(31% 0.018 220);
  --graph-grid-dot: oklch(61% 0.018 210 / 38%);
  --graph-grid-dot-size: 0.65px;
  --graph-grid-step: 5px;
  --graph-grid-render-dot-size: var(--graph-grid-dot-size);
  --graph-grid-render-step: var(--graph-grid-step);
  --home-grid-render-dot-size: 0.6667px;
  --home-grid-render-dot-edge: 0.8333px;
  --home-grid-render-step: 3.3333px;
  --editor-line: oklch(50% 0.018 210);
  --inline-code-line: oklch(39% 0.018 210);
  --editor-text: oklch(92% 0.008 205);
  --syntax-comment: oklch(65% 0.018 205);
  --syntax-operator: oklch(76% 0.12 310);
  --syntax-keyword: oklch(76% 0.10 245);
  --syntax-halt: oklch(76% 0.11 28);
  --syntax-symbol: oklch(80% 0.11 75);
  --syntax-state: oklch(78% 0.09 165);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; height: 100%; }
body { overflow: hidden; font-weight: 500; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button {
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--surface);
  font-size: .68rem;
  cursor: pointer;
}
button:hover { background: var(--surface-2); }
button:active { background: var(--surface); }
button:disabled { opacity: .45; cursor: default; }
button.primary { color: var(--blue-deep); border-color: color-mix(in oklch, var(--blue) 55%, var(--line)); background: var(--blue-soft); }
button.primary:hover { background: color-mix(in oklch, var(--blue-soft) 82%, var(--blue)); }
button.primary:active { background: var(--blue-soft); }
button.quiet { color: var(--muted); background: transparent; }
button.quiet:active { background: transparent; }
button.wide { width: 100%; }
code, .score, .trace-bar { font-family: "SFMono-Regular", Consolas, monospace; }

.appbar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--surface-2);
}
.home-link { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--text); text-decoration: none; }
.home-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: miter; }
.home-link:hover, .home-link:focus-visible { outline: 0; background: var(--surface); }
.home-link:active { background: var(--surface-2); }
.puzzle-name { font-size: .7rem; color: var(--muted); }
.task-summary { flex: 1; align-self: stretch; display: flex; align-items: center; min-width: 0; font-size: .68rem; }
.puzzle-select { display: flex; flex: 1; align-items: center; gap: 10px; align-self: stretch; min-width: 0; padding-left: 2px; color: var(--muted); font-size: .58rem; }
.category-path { overflow: hidden; color: var(--text) !important; font-size: .62rem; font-weight: 700; text-overflow: ellipsis; }
.level-picker { position: relative; margin-left: auto; }
.level-picker-button { position: relative; width: 180px; height: 24px; min-height: 24px; padding: 1px 24px 1px 5px; overflow: hidden; border: 1px solid var(--line-dark); background: var(--surface); font: 500 .61rem "SFMono-Regular", Consolas, monospace; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.level-picker-button::after { content: "▾"; position: absolute; right: 7px; color: var(--muted); }
.level-menu { position: absolute; z-index: 20; top: 27px; left: 0; width: 220px; max-height: min(420px, calc(100vh - 52px)); overflow-y: auto; border: 1px solid var(--line-dark); background: var(--surface); box-shadow: 2px 3px 0 oklch(20% 0.01 220 / 24%); }
.level-menu[hidden] { display: none; }
.level-group + .level-group { border-top: 1px solid var(--line-dark); }
.level-group-label { padding: 5px 7px 4px; color: var(--muted); background: var(--surface-3); font-size: .5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.level-menu button { display: block; width: 100%; min-height: 26px; padding: 4px 7px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); font-size: .61rem; text-align: left; white-space: nowrap; }
.level-menu button:last-child { border-bottom: 0; }
.level-menu button:hover, .level-menu button:focus-visible { outline: 0; background: var(--surface-2); }
.level-menu button[aria-selected="true"] { color: var(--blue-deep); background: var(--blue-soft); }

.home-view { height: 100vh; background: var(--surface); }
.home-browser {
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: oklch(70% 0.006 220);
  background-image: radial-gradient(circle, oklch(62% 0.008 220) 0 var(--home-grid-render-dot-size), transparent var(--home-grid-render-dot-edge));
  background-size: var(--home-grid-render-step) var(--home-grid-render-step);
}
.folder-stage { position: relative; width: 100%; height: 100%; min-width: 0; }
.spatial-column { position: absolute; width: 172px; display: grid; gap: 0; animation: column-pop .18s cubic-bezier(.2, .8, .25, 1); }
.spatial-column.game-column { left: 16px; top: 16px; }
.spatial-column.category-column { left: 202px; top: 16px; }
.spatial-column.level-column { left: 388px; top: 16px; width: 196px; }
.spatial-card {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 2px solid var(--line-dark);
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--line-dark);
  font-size: .78rem;
  text-align: left;
  transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease;
}
.spatial-card + .spatial-card { margin-top: -2px; }
.spatial-card small { margin-left: auto; color: var(--muted); font-size: .5rem; }
.spatial-card:hover, .spatial-card:focus-visible { z-index: 1; outline: 0; border-color: var(--blue); background: var(--blue-soft); }
.spatial-card:active, .spatial-card.is-pinned { z-index: 0; transform: translate(3px, 3px); border-color: var(--blue); background: var(--blue-soft); box-shadow: none; }
.spatial-card.is-flashing { animation: card-flash .2s steps(2, end); }
.folder-icon { position: relative; width: 16px; height: 11px; flex: 0 0 16px; transform: translateY(1px); border: 1px solid var(--line-dark); background: var(--surface-3); }
.folder-icon::before { content: ""; position: absolute; left: 1px; top: -5px; width: 8px; height: 4px; border: 1px solid var(--line-dark); border-bottom: 0; background: var(--surface-3); }
@keyframes column-pop { from { opacity: 0; transform: translateX(-10px) translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes card-flash { 0%, 100% { filter: none; } 50% { filter: brightness(1.35); } }
.task-summary strong { line-height: 1; white-space: nowrap; }
.task-summary span { line-height: 1; color: var(--muted); white-space: nowrap; }
.task-summary code { color: var(--muted); font-size: .6rem; white-space: nowrap; }
.appbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.score { font-size: .64rem; color: var(--muted); }
.score b { font-size: .75rem; color: var(--text); }

.test-panel { width: 210px; min-width: 210px; display: flex; flex-direction: column; border-left: 1px solid var(--line-dark); background: var(--surface); }
.test-title { flex: 0 0 36px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-bottom: 1px solid var(--line-dark); background: var(--surface-3); }
.test-title button { min-width: 88px; }
.test-scroll { min-height: 0; overflow: auto; }
.test-panel table { width: 100%; table-layout: fixed; border-collapse: collapse; font: 500 .68rem "SFMono-Regular", Consolas, monospace; }
.test-panel th { position: sticky; top: 0; padding: 6px; border-bottom: 1px solid var(--line-dark); color: var(--muted); background: var(--surface-2); text-align: left; font-size: .62rem; text-transform: uppercase; }
.test-panel td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.test-panel td.pass { color: var(--green); font-weight: 700; }
.test-panel td.fail { color: var(--red); font-weight: 700; }
.test-panel td.pending { color: var(--muted); }
.test-panel tr.test-pass td { background: var(--green-soft); }
.test-panel tr.test-fail td { background: var(--red-soft); }
.test-panel td.compile-error { padding: 12px 6px; border-bottom: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.workspace { min-width: 0; height: 100vh; display: grid; grid-template-rows: minmax(250px, 1fr) 127px; }
.machine-area { --source-width: 560px; min-height: 0; display: grid; grid-template-columns: var(--source-width) 5px minmax(0, 1fr) auto; }
.source-resizer { position: relative; z-index: 3; cursor: col-resize; touch-action: none; background: var(--surface); }
.source-resizer::after { content: ""; position: absolute; inset: 0 2px; background: var(--line-dark); }
.source-resizer:hover::after, .source-resizer:focus-visible::after, body.resizing-source .source-resizer::after { background: var(--blue); }
body.resizing-source { cursor: col-resize; user-select: none; }
.spec-resizer { position: relative; z-index: 3; flex: 0 0 5px; cursor: row-resize; touch-action: none; background: var(--surface); }
.spec-resizer::after { content: ""; position: absolute; inset: 2px 0; background: var(--line-dark); }
.spec-resizer:hover::after, .spec-resizer:focus-visible::after, body.resizing-spec .spec-resizer::after { background: var(--blue); }
body.resizing-spec { cursor: row-resize; user-select: none; }
.graph-canvas {
  position: relative;
  overflow: hidden;
  background-color: var(--editor-surface);
  background-image: radial-gradient(circle, var(--graph-grid-dot) 0 var(--graph-grid-render-dot-size), transparent calc(var(--graph-grid-render-dot-size) + 0.5px));
  background-size: var(--graph-grid-render-step) var(--graph-grid-render-step);
  cursor: grab;
  touch-action: none;
}
.graph-canvas.panning { cursor: grabbing; user-select: none; }
#state-graph { display: block; transform-origin: 0 0; will-change: transform; }
.arrow-marker path { fill: var(--editor-text); }
.arrow-marker.active path { fill: var(--blue-active); }
.graph-edge { fill: none; stroke: var(--editor-text); stroke-width: 1.5; marker-end: url(#arrow); opacity: .72; }
.graph-edge.halt-edge { stroke: var(--red-light); }
.graph-edge.active { stroke: var(--blue-active); stroke-width: 1.5; marker-end: url(#arrow-active); opacity: 1; }
.graph-edge-label rect { fill: var(--editor-surface-2); stroke: var(--editor-line); stroke-width: 1; }
.graph-label { font: 500 13.5px "SFMono-Regular", Consolas, monospace; fill: var(--editor-text); }
.graph-edge-label.active rect { fill: color-mix(in oklch, var(--blue) 45%, var(--editor-surface)); stroke: var(--blue-active); }
.graph-node { fill: var(--editor-surface-2); stroke: var(--editor-text); stroke-width: 1.5; }
.graph-node.start { fill: var(--editor-surface-2); }
.graph-state.active .graph-node { fill: color-mix(in oklch, var(--blue) 45%, var(--editor-surface)); stroke: var(--blue-active); stroke-width: 1.5; }
.graph-node.halt { fill: var(--red-deep); stroke: var(--syntax-halt); cursor: default; }
.graph-state.active .graph-node.halt { fill: var(--red); stroke: var(--red-light); }
.graph-name { font: 700 12px "SFMono-Regular", Consolas, monospace; fill: var(--editor-text); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }

.level-spec { flex: 0 0 auto; max-height: 300px; min-height: 52px; overflow: auto; padding: 9px 10px; background: var(--surface-3); }
.level-spec > strong, .level-spec > p, .level-spec > ol { letter-spacing: -0.04em; }
.level-spec > strong { display: block; margin-bottom: 5px; font-size: .75rem; font-weight: 800; }
.level-spec p { margin: 0 0 6px; color: var(--text); font-size: .72rem; line-height: 1.35; }
.level-spec ol { margin: 0 0 7px; padding-left: 20px; font-size: .7rem; line-height: 1.45; }
.lesson-code { margin: 0 0 8px; padding: 7px 8px; overflow: auto; border: 1px solid var(--editor-line); background: var(--editor-bg); color: var(--editor-text); font: 500 .68rem/1.45 "SFMono-Regular", Consolas, monospace; tab-size: 2; }
.level-spec .lesson-token { padding: 0 2px; border: 1px solid var(--inline-code-line); background: var(--editor-bg); font-weight: 500; letter-spacing: 0; }
.lesson-next { font-weight: 500; }
.transition-editor { flex: 1 1 auto; min-height: 150px; }
.code-editor { --editor-line-height: 18px; --editor-top-inset: 4px; position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--editor-line); background: var(--editor-bg); }
.line-numbers { position: absolute; z-index: 3; top: var(--editor-top-inset); left: 0; width: 22px; margin: 0; color: var(--syntax-comment); background: var(--editor-surface); font: 500 .64rem/var(--editor-line-height) "SFMono-Regular", Consolas, monospace; text-align: right; user-select: none; pointer-events: none; }
.line-numbers span { display: block; padding-right: 4px; }
.active-line { position: absolute; z-index: 0; left: 22px; right: 0; height: var(--editor-line-height); background: color-mix(in oklch, var(--blue) 22%, var(--editor-bg)); pointer-events: none; }
.syntax-layer {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: var(--editor-top-inset) 7px 7px 26px;
  color: var(--editor-text);
  background: transparent;
  font: 500 .72rem/var(--editor-line-height) "SFMono-Regular", Consolas, monospace;
  tab-size: 2;
  white-space: pre;
  pointer-events: none;
}
.token-comment { color: var(--syntax-comment); font-style: italic; }
.token-arrow { color: var(--syntax-operator); font-weight: 700; }
.token-keyword { color: var(--syntax-keyword); font-weight: 700; }
.token-halt { color: var(--syntax-halt); font-weight: 700; }
.token-symbol { color: var(--syntax-symbol); }
.token-move { color: var(--syntax-operator); font-weight: 700; }
.token-state { color: var(--syntax-state); }
.source-editor {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  padding: var(--editor-top-inset) 7px 7px 26px;
  border: 0;
  border-radius: 0;
  outline: none;
  color: transparent;
  caret-color: var(--editor-text);
  background: transparent;
  font: 500 .72rem/var(--editor-line-height) "SFMono-Regular", Consolas, monospace;
  tab-size: 2;
}
.code-editor:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.source-panel { min-height: 0; display: flex; flex-direction: column; padding: 0; background: var(--surface-2); }
.debugger { min-width: 0; border-top: 1px solid var(--line-dark); background: var(--surface); }
.debug-toolbar { position: relative; height: 34px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-bottom: 1px solid var(--line); }
.debug-toolbar label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: .6rem; }
.debug-toolbar .input-control { gap: 7px; color: var(--text); font-size: .72rem; font-weight: 700; }
.debug-toolbar input, .debug-toolbar select { height: 24px; border: 1px solid var(--line-dark); border-radius: 0; background: var(--surface); padding: 2px 5px; font: 500 .64rem "SFMono-Regular", Consolas, monospace; }
.debug-toolbar input { width: 98px; }
.debug-toolbar button.transport { display: grid; width: 27px; min-width: 27px; padding: 0; place-items: center; font: .72rem "SFMono-Regular", Consolas, monospace; }
.debug-toolbar button.transport span { display: flex; height: 100%; align-items: center; justify-content: center; line-height: 1; }
#step-back:not(.speed-control) span, #step-forward:not(.speed-control) span { position: relative; width: 12px; height: 12px; font-size: 0; }
#step-back:not(.speed-control) span { background: linear-gradient(currentColor 0 0) left center / 2px 10px no-repeat; }
#step-forward:not(.speed-control) span { background: linear-gradient(currentColor 0 0) right center / 2px 10px no-repeat; }
#step-back:not(.speed-control) span::before, #step-forward:not(.speed-control) span::before { content: ""; position: absolute; top: 1px; width: 7px; height: 10px; background: currentColor; }
#step-back:not(.speed-control) span::before { right: 1px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
#step-forward:not(.speed-control) span::before { left: 1px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#play-pause:not(.is-playing) span { position: relative; width: 12px; height: 12px; overflow: hidden; font-size: 0; }
#play-pause:not(.is-playing) span::before { content: ""; position: absolute; top: 1px; left: 3px; width: 8px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#play-pause.is-playing span { width: 9px; height: 12px; align-items: flex-start; justify-content: flex-start; }
#play-pause.is-playing span::before { content: ""; width: 3px; height: 12px; background: currentColor; box-shadow: 6px 0 currentColor; }
.speed-multiplier { min-width: 34px; color: var(--muted); font-size: .6rem; text-align: left; }
#reset-machine.halted { color: oklch(97% 0.01 28); border-color: var(--red-light); background: var(--red); }
#reset-machine.halted:hover { background: var(--red-deep); }
#reset-machine.halted:active { background: var(--red); }
#reset-machine span { font-size: 1rem; transform: translateY(-1px); }
.separator { width: 1px; height: 22px; margin: 0 3px; background: var(--line); }
.tape-shell { height: 92px; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; padding: 6px 10px 18px; background: var(--bg); scrollbar-color: var(--line-dark) var(--line); scrollbar-width: thin; }
.tape { display: flex; flex: 0 0 auto; justify-content: flex-start; margin: 0; }
.tape-cell { position: relative; display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 39px; margin-right: -1px; border: 1px solid var(--line-dark); background: var(--surface); font: 700 .82rem "SFMono-Regular", Consolas, monospace; }
.tape-cell small { position: absolute; top: 2px; right: 3px; color: var(--muted); font-size: .46rem; font-weight: 400; }
.tape-cell.head { z-index: 1; background: var(--head); outline: 2px solid var(--blue); outline-offset: -2px; }
.tape-cell.head::after { content: "▲"; position: absolute; top: 42px; color: var(--blue); font-size: .6rem; }
.trace-bar { position: absolute; top: 0; left: 50%; height: 33px; display: flex; align-items: center; gap: 14px; transform: translateX(-50%); font-size: .57rem; }
.trace-bar span { white-space: nowrap; }
.current-output { display: flex; min-width: 0; max-width: min(32vw, 480px); margin-left: auto; gap: 5px; color: var(--muted); font-size: .57rem; white-space: nowrap; }
.current-output b { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.current-output.fault { max-width: 480px; color: var(--red); }
.current-output.fault b { overflow: visible; color: var(--red); text-overflow: clip; }
.debug-toolbar .fault-message { max-width: 180px; margin-left: 6px; overflow: hidden; color: var(--red); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .workspace { height: 760px; }
}

@media (max-width: 680px) {
  .appbar { gap: 8px; }
  .puzzle-name { display: none; }
  .machine-area { grid-template-columns: 1fr; }
  .source-resizer { display: none; }
  .spec-resizer { display: none; }
  .test-panel { width: auto; min-width: 0; max-height: 160px; border-top: 1px solid var(--line-dark); border-left: 0; }
  .workspace { height: auto; grid-template-rows: auto 270px; }
  .graph-canvas { height: 340px; }
  .debug-toolbar { height: auto; flex-wrap: wrap; }
  .folder-stage { width: 100%; align-items: stretch; justify-content: flex-start; gap: 12px; padding: 20px; overflow-x: auto; }
  .folder-stage { display: flex; height: auto; min-height: 100%; }
  .spatial-column, .spatial-column.game-column, .spatial-column.category-column, .spatial-column.level-column { position: static; flex: 0 0 150px; }
  .spatial-column.level-column { flex-basis: 190px; }
}