:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #fff;
  --ink: #202633;
  --muted: #5f6878;
  --line: #e4e7ed;
  --primary: #4338ca;
  --primary-hover: #352aa9;
  --selected: #eeedff;
  --danger: #b42335;
  --code-font: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; color: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: transparent; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:not(:disabled), a, select { transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible { outline: 3px solid #857bf1; outline-offset: 3px; }
input:focus, textarea:focus { outline: 2px solid #857bf1; outline-offset: 1px; }
::selection { background: #d9d6ff; color: #251b79; }
input, textarea { caret-color: var(--primary); }
svg { flex-shrink: 0; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 14px; line-height: 1.4; font-weight: 650; }
h3 { font-size: 13px; font-weight: 650; }
a { color: var(--primary); }
code, pre { font-family: var(--code-font); }
button span, button svg { pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -70px; left: 16px; z-index: 100; padding: 12px 20px; background: white; }
.skip-link:focus { top: 8px; }
.app-header { height: 74px; padding: 0 30px; display: flex; align-items: center; gap: 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-size: 30px; font-weight: 750; letter-spacing: -.035em; }
.brand-mark { display: grid; place-items: center; background: var(--primary); color: white; width: 37px; height: 37px; border-radius: 11px; }
.brand-dot { color: var(--primary); }
.header-divider { height: 22px; width: 1px; background: var(--line); }
.app-subtitle { color: var(--muted); font-size: 13px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 25px; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 0; color: var(--muted); font-size: 12px; font-weight: 550; }
.text-button:hover { color: var(--primary); }
.local-badge { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #476255; background: #f0f6f2; border-radius: 6px; padding: 5px 9px; }
.local-badge>span { width: 5px; height: 5px; border-radius: 50%; background: #478264; }
.project-bar { height: 83px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.project-name-wrap { display: flex; gap: 12px; align-items: center; min-width: 0; }
.project-name-wrap>svg { color: #71798a; }
.project-name-wrap>div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#project-title { border: 0; background: transparent; border-radius: 4px; font-size: 17px; font-weight: 650; color: var(--ink); width: min(420px, 30vw); padding: 1px 0; text-overflow: ellipsis; }
#save-status { color: var(--muted); font-size: 11px; display: flex; gap: 5px; align-items: center; min-height: 17px; }
#save-status svg { color: #498269; }
.project-actions { display: flex; align-items: center; gap: 8px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; border-radius: 7px; font-size: 12px; font-weight: 600; min-height: 36px; white-space: nowrap; }
.button.primary { background: var(--primary); color: white; }
.button.primary:not(:disabled):hover { background: var(--primary-hover); }
.button.secondary { border: 1px solid #dce0e7; background: white; }
.button.secondary:not(:disabled):hover { background: #f4f3fc; border-color: #b9b3e8; }
.button.subtle { color: #525e70; }
.button.subtle:hover { background: #e9ebf1; }
.button.mini { min-height: 27px; padding: 4px 8px; font-size: 11px; }
.icon-button { width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--muted); border-radius: 5px; flex-shrink: 0; }
.icon-button:not(:disabled):hover { background: #eaeaf3; color: var(--primary); }
.full-width { width: 100%; }
.app-layout { display: grid; grid-template-columns: 214px minmax(0, 1fr) 292px; margin: 0 20px 20px; height: calc(100dvh - 177px); min-height: 560px; border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.left-sidebar { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: #fcfcfd; }
.sidebar-tabs { height: 57px; padding: 0 12px; display: flex; align-items: stretch; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sidebar-tabs button { position: relative; padding: 0; color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 6px; }
.sidebar-tabs button[aria-selected="true"] { color: var(--primary); font-weight: 650; }
.sidebar-tabs button[aria-selected="true"]::after { content: ''; position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; background: var(--primary); }
#sidebar-content { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #c6cbd4 transparent; }
.sidebar-section { padding: 23px 17px 20px; }
.sidebar-section h2 { font-size: 13px; margin-bottom: 6px; }
.sidebar-section>p { color: var(--muted); font-size: 11px; line-height: 1.7; }
.palette { display: grid; gap: 8px; margin-top: 20px; }
.palette-item { display: flex; align-items: center; text-align: left; padding: 9px 10px; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: white; min-height: 57px; }
.palette-item:hover { border-color: #bdb6ec; background: #f7f6ff; }
.palette-item>span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.palette-item strong { font-size: 12px; font-weight: 600; }
.palette-item small { font-size: 10px; color: var(--muted); }
.palette-item>svg { color: #8b92a0; }
.palette-icon { width: 30px; height: 30px; display: grid; place-items: center; }
.palette-input .palette-icon, .palette-output .palette-icon { color: #137789; }
.palette-assign .palette-icon { color: #5d65bd; }
.palette-if .palette-icon { color: #a27125; }
.palette-while .palette-icon, .palette-for .palette-icon { color: #8254ac; }
.lesson-note { margin: 0 17px 20px; padding-top: 21px; border-top: 1px solid var(--line); }
.lesson-icon { color: var(--primary); margin-bottom: 9px; }
.lesson-note h3 { font-size: 12px; margin-bottom: 8px; }
.lesson-note p { color: var(--muted); font-size: 11px; line-height: 1.7; }
.example-io { display: grid; gap: 7px; margin-top: 14px; }
.example-io>span { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); gap: 12px; }
.example-io strong { color: #353d50; font-family: var(--code-font); font-size: 11px; font-weight: 600; }
details { margin-top: 16px; }
summary { cursor: pointer; color: var(--primary); font-size: 11px; }
details p { margin-top: 9px; }
.sidebar-bottom { padding: 17px; display: flex; gap: 10px; align-items: center; color: #656c7c; border-top: 1px solid var(--line); font-size: 11px; flex-shrink: 0; background: #fcfcfd; }
.sidebar-bottom svg { color: #8a82ba; }
.sidebar-bottom strong { font-weight: 550; color: #394053; }
.example-list { padding: 0 9px; }
.example-item { display: flex; gap: 10px; align-items: center; padding: 13px 9px; text-align: left; width: 100%; border-radius: 7px; margin-bottom: 6px; }
.example-item:hover, .example-item.current { background: var(--selected); }
.example-item>span:nth-child(2) { flex: 1; min-width: 0; }
.example-item strong, .example-item small { display: block; }
.example-item strong { font-size: 11px; font-weight: 600; }
.example-item small { font-size: 10px; margin-top: 4px; color: var(--muted); }
.example-symbol { color: var(--primary); }
.example-item>svg { color: #818798; }
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.workspace:focus { outline: none; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 57px; flex-shrink: 0; gap: 10px; border-bottom: 1px solid var(--line); }
.view-tabs { display: flex; gap: 3px; align-items: center; background: #f1f2f6; border-radius: 7px; padding: 3px; }
.view-tabs button { display: flex; gap: 6px; align-items: center; padding: 6px 10px; font-size: 11px; font-weight: 550; color: var(--muted); border-radius: 5px; }
.view-tabs button[aria-selected="true"] { background: white; color: var(--primary); box-shadow: 0 1px 3px #20263312; }
.view-tabs button:not([aria-selected="true"]):hover { color: var(--ink); background: #e6e7ee; }
.block-count { font-size: 10px; color: var(--muted); white-space: nowrap; }
.editor-panes { display: flex; flex: 1; min-height: 0; min-width: 0; }
.diagram-pane, .code-pane { min-width: 0; display: flex; flex-direction: column; position: relative; }
.diagram-pane { flex: 1; }
.code-pane { width: 44%; min-width: 265px; border-left: 1px solid var(--line); background: #fcfcff; }
.view-diagram .code-pane, .view-code .diagram-pane { display: none; }
.view-code .code-pane { width: 100%; border: 0; }
.pane-title { height: 45px; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 0 18px; background: #fff; border-bottom: 1px solid #f0f1f5; flex-shrink: 0; }
.pane-title h2 { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #586173; font-weight: 550; }
.pane-title>span { font-size: 10px; color: #707888; }
.view-split .diagram-pane .pane-title>span { display: none; }
.canvas-scroll { flex: 1; overflow: auto; min-height: 0; background-color: #fbfcfe; background-image: radial-gradient(#dce0e9 .8px, transparent .8px); background-size: 16px 16px; padding: 20px 16px 70px; scrollbar-width: thin; scrollbar-color: #c8cdd7 transparent; }
#diagram-sizer { position: relative; margin: 0 auto; }
#diagram { transform-origin: left top; position: relative; }
.connections { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.branch-label { font: 10px "Segoe UI", system-ui, sans-serif; fill: #667087; }
.branch-label.yes { fill: #46755e; }
.branch-label.no { fill: #9b6659; }
.flow-node, .terminal-node { position: absolute; }
.flow-node { padding: 0; background: transparent; overflow: visible; text-align: center; }
.flow-node>svg { position: absolute; width: 100%; height: 100%; inset: 0; fill: #fff; stroke: #c3c9e7; stroke-width: 1.3; transition: fill .2s ease-out, stroke .2s ease-out; }
.node-input>svg, .node-output>svg { fill: #f1fbfc; stroke: #a1ced3; }
.node-if>svg { fill: #fffbf1; stroke: #dbbd80; }
.node-while>svg, .node-for>svg { fill: #f8f3ff; stroke: #c6afdc; }
.node-for .node-expression { white-space: pre-line; -webkit-line-clamp: 3; }
.flow-node:hover>svg { stroke: var(--primary); stroke-width: 2; }
.flow-node.selected>svg { stroke: var(--primary); stroke-width: 2.5; }
.flow-node.executing>svg { fill: #eeebff; stroke: var(--primary); stroke-width: 2.7; }
.flow-node.executing .node-content { color: var(--primary); }
.flow-node.executing::after { content: ''; position: absolute; left: -17px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.node-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; position: relative; z-index: 1; padding: 7px 18px; gap: 4px; pointer-events: none; }
.node-kind { color: #656d85; font-size: 10px; line-height: 1; font-weight: 500; }
.node-expression { max-width: 100%; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font: 12px/1.4 var(--code-font); font-weight: 500; color: #343d56; }
.node-while .node-expression, .node-if .node-expression { max-width: 143px; }
.node-while .node-kind { color: #78579b; }
.node-if .node-kind { color: #926a29; }
.terminal-node { border: 1px solid #c6cad5; background: white; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #5e6679; font-size: 11px; }
.terminal-node[data-node="start"] { background: #eeedff; color: var(--primary); border-color: #c8c3ef; font-weight: 600; }
.terminal-node.executing { background: var(--primary); border-color: var(--primary); color: white; }
.insert-slot { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #d7dce6; border-radius: 50%; background: #fbfcfe; color: #737e91; opacity: .85; }
.insert-slot:hover, .insert-slot:focus-visible, .dragging .insert-slot { opacity: 1; color: var(--primary); border-color: #8e83dd; background: #eeebff; transform: scale(1.25); }
.canvas-controls { position: absolute; bottom: 16px; left: 16px; display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); background: white; border-radius: 7px; padding: 3px; z-index: 2; }
.canvas-controls>span { font-size: 10px; min-width: 37px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.canvas-controls .control-divider { min-width: 1px; width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
#code-status { flex-shrink: 0; }
.code-synced, .code-dirty { display: flex; align-items: center; gap: 5px; min-height: 37px; padding: 5px 13px; font-size: 10px; border-bottom: 1px solid var(--line); }
.code-synced { color: #627069; background: #fafcfa; }
.code-synced>span { margin-left: auto; color: #727c79; font-size: 9px; }
.code-dirty { background: #fff9eb; color: #7a5a19; flex-wrap: wrap; }
.code-dirty>span { flex: 1; }
.code-dirty .text-button { font-size: 10px; padding: 3px; }
.code-error { padding: 9px 13px; color: var(--danger); font-size: 11px; background: #fff0f1; line-height: 1.6; overflow-wrap: anywhere; }
.code-editor-wrap { display: flex; flex: 1; min-height: 0; overflow: hidden; padding-top: 17px; }
#line-numbers { width: 39px; flex-shrink: 0; padding: 0 10px 80px 0; color: #8a90a0; font: 11px/27px var(--code-font); text-align: right; overflow: hidden; user-select: none; }
#line-numbers span { display: block; height: 27px; }
#line-numbers .active-line { color: var(--primary); font-weight: 700; }
.code-input-wrap { flex: 1; min-width: 0; position: relative; overflow: hidden; }
#code-highlight, #code-editor { margin: 0; border: 0; padding: 0 14px 80px 0; font: 12px/27px var(--code-font); tab-size: 2; letter-spacing: 0; white-space: pre; }
#code-highlight { position: absolute; left: 0; top: 0; min-width: 100%; pointer-events: none; color: #444c62; }
.code-line { display: block; min-height: 27px; white-space: pre; }
.code-line.active-line { background: #ece9ff; box-shadow: inset 2px 0 var(--primary); }
#code-editor { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ink); overflow: auto; scrollbar-width: thin; scrollbar-color: #c8cdd7 transparent; border-radius: 0; }
#code-editor:focus { outline: none; }
.code-input-wrap:focus-within { box-shadow: inset 0 -2px #c6c0f2; }
#code-editor::selection { background: #c5bafb80; }
.token-keyword { color: #7955a9; font-weight: 600; }
.token-number { color: #966118; }
.token-string { color: #25715d; }
.token-operator { color: #4d60a9; }
.token-comment { color: var(--muted); font-style: italic; }
.code-footer { padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 9px; color: #727a8b; background: #f6f6fb; border-top: 1px solid var(--line); }
.workspace-footer { height: 36px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; gap: 12px; flex-shrink: 0; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); background: white; }
.workspace-footer>span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 5px; height: 5px; border-radius: 50%; background: #8c83d8; flex-shrink: 0; }
.workspace-footer button { font-size: 9px; color: #6f678d; white-space: nowrap; }
.runtime-panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c8cdd7 transparent; }
.runtime-heading { height: 57px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.runtime-heading h2 { font-size: 12px; }
.live-label { font-size: 9px; color: #72778a; display: flex; align-items: center; gap: 5px; }
.live-label>span { width: 5px; height: 5px; border-radius: 50%; background: #887dbf; }
#run-controls { padding: 18px 17px 11px; border-bottom: 1px solid var(--line); }
.run-main { display: flex; gap: 8px; }
.run-button { flex: 1; padding: 10px; }
.step-button { padding: 9px 12px; }
.run-secondary { display: flex; gap: 4px; align-items: center; margin-top: 11px; }
.run-secondary label { font-size: 10px; margin-left: 9px; color: var(--muted); }
.run-secondary select { border: 0; background: transparent; font-size: 10px; color: #4d5669; padding: 4px 1px; width: 64px; cursor: pointer; }
.step-counter { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 650; color: #505875; }
.step-counter>span { font-size: 10px; color: var(--muted); font-weight: 400; }
#execution-status { padding: 17px; border-bottom: 1px solid var(--line); }
.execution-state { display: flex; gap: 9px; }
.state-symbol { height: 25px; width: 25px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; color: #7063a7; background: #f2effb; }
.execution-state>div { min-width: 0; }
.execution-state strong { font-size: 11px; font-weight: 600; }
.execution-state p { color: var(--muted); font-size: 10px; line-height: 1.7; margin-top: 3px; overflow-wrap: anywhere; }
.state-error .state-symbol { background: #ffeff0; color: var(--danger); }
.state-error strong, .state-error p { color: var(--danger); }
.state-done .state-symbol { background: #eaf7ee; color: #26764c; }
.state-input .state-symbol { background: #e9f5f8; color: #176f86; }
.variables-section { padding: 17px 0 12px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.variables-section .section-heading { padding: 0 17px; margin-bottom: 11px; }
.section-heading h3 { font-size: 12px; }
#variable-count { font: 10px var(--code-font); background: #f0f1f6; color: #6e7385; border-radius: 4px; padding: 2px 5px; }
.variable-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.variable-table th { text-align: left; color: #757d8d; font-size: 9px; font-weight: 400; padding: 5px 17px; }
.variable-table td { padding: 9px 17px; font: 11px/1.6 var(--code-font); overflow-wrap: anywhere; }
.variable-table td:last-child { text-align: right; }
.variable-table th:last-child { text-align: right; }
.variable-table tr.changed td { background: #f2efff; color: #5d46a0; }
.variable-table td strong { font-weight: 550; }
.variable-type { color: #8d92a4; font-size: 10px; margin-right: 8px; }
.previous-value { color: #817a94; font-size: 10px; margin-right: 4px; text-decoration: line-through; }
.variable-table td svg { color: #9d93b2; margin-right: 5px; }
.empty-variables { text-align: center; padding: 17px 12px 19px; color: #788091; }
.empty-braces { font: 23px var(--code-font); color: #c1c4d4; }
.empty-variables p { font-size: 10px; margin-top: 9px; }
.empty-variables>span:last-child { font-size: 9px; color: #81899a; }
.console-section { flex: 1; display: flex; flex-direction: column; min-height: 185px; }
.console-tabs { height: 46px; display: flex; gap: 19px; padding: 0 17px; flex-shrink: 0; }
.console-tabs button { font-size: 11px; color: var(--muted); position: relative; padding: 0; display: flex; align-items: center; gap: 6px; }
.console-tabs button[aria-selected="true"] { color: var(--primary); font-weight: 550; }
.console-tabs button[aria-selected="true"]::after { content: ''; position: absolute; height: 2px; left: 0; right: 0; bottom: 0; background: var(--primary); }
#output-count { color: #8c82bc; font-size: 9px; }
#console-content { flex: 1; min-height: 120px; max-height: 310px; overflow-y: auto; background: #fbfbfd; border-top: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: #c8cdd7 transparent; }
.output-console { min-height: 100%; padding: 15px 16px; }
.output-line { display: flex; gap: 13px; margin-bottom: 7px; }
.output-line>span { color: #8a91a3; font: 9px/20px var(--code-font); }
.output-line pre { font: 12px/20px var(--code-font); margin: 0; color: #3e465d; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.console-placeholder { padding: 8px 0 18px; color: #9ca2b3; }
.console-placeholder p { margin-top: 12px; color: var(--muted); font-size: 11px; }
.console-placeholder>span { color: var(--muted); font-size: 10px; }
.console-caret { display: block; width: 6px; height: 13px; background: #c9c4e4; margin-top: 6px; }
.runtime-footnote { font-size: 10px; line-height: 1.6; color: var(--muted); display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding: 12px 16px; }
.trace-list { padding: 5px 16px; }
.trace-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eceef3; }
.trace-item>span { color: #8c83ae; font: 10px/1.7 var(--code-font); min-width: 18px; }
.trace-item p { color: #586076; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.trace-empty { font-size: 11px; color: var(--muted); padding: 16px 0; }
.input-form { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.input-form label { font-size: 11px; font-weight: 600; display: block; margin-bottom: 7px; }
.input-form>div { display: flex; gap: 7px; }
.input-form input { min-width: 0; flex: 1; padding: 8px 9px; border: 1px solid #c8c3e4; border-radius: 6px; font: 12px var(--code-font); }
.input-form>span { display: block; font-size: 9px; color: var(--muted); margin-top: 7px; }
.field-error { font-size: 10px; color: var(--danger); margin-top: 7px; line-height: 1.6; }
.field-error:empty { display: none; }
.inspector { padding: 17px; border-top: 1px solid var(--line); background: #f8f7fe; }
.inspector .section-heading { margin-bottom: 12px; }
.inspector label { display: block; font-size: 10px; color: #5b6176; margin: 12px 0 5px; }
.inspector input, .inspector textarea { width: 100%; border: 1px solid #d9d7e6; background: white; border-radius: 6px; padding: 8px; font: 11px/1.6 var(--code-font); resize: vertical; color: var(--ink); }
.field-help { color: var(--muted); font-size: 10px; margin: 7px 0 10px; line-height: 1.6; }
.inspector .button { margin-top: 13px; font-size: 11px; padding: 8px; }
.node-actions { display: flex; gap: 5px; align-items: center; margin-top: 10px; }
.node-actions .danger { color: var(--danger); margin-left: auto; font-size: 11px; }
#popover { position: fixed; width: 190px; padding: 7px; border: 1px solid #dcdce8; background: white; border-radius: 10px; z-index: 20; }
#popover[hidden] { display: none; }
.popover-heading { display: flex; align-items: center; justify-content: space-between; padding: 1px 3px 5px 8px; font-size: 10px; color: var(--muted); }
#popover>button { width: 100%; text-align: left; padding: 8px 9px; display: flex; align-items: center; gap: 9px; font-size: 12px; border-radius: 5px; }
#popover>button:hover { background: var(--selected); color: var(--primary); }
#popover>button svg:last-child { margin-left: auto; color: #9a91b9; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 10px); max-width: min(540px, calc(100vw - 32px)); padding: 11px 18px; color: white; background: #303247; border-radius: 8px; box-shadow: 0 5px 20px #20263325; z-index: 80; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s ease-out, transform .2s ease-out; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
dialog { border: 0; border-radius: 14px; padding: 27px; max-width: min(650px, calc(100vw - 32px)); width: 650px; max-height: calc(100dvh - 48px); color: var(--ink); box-shadow: 0 18px 70px #20263335; }
dialog::backdrop { background: #20243365; }
.confirm-dialog { width: 490px; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.dialog-header h2 { font-size: 19px; }
dialog>p { font-size: 13px; line-height: 1.8; color: var(--muted); margin-bottom: 17px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 23px; flex-wrap: wrap; }
.help-steps { padding-left: 23px; margin: 22px 0; }
.help-steps li { padding-left: 5px; margin-bottom: 18px; color: var(--primary); }
.help-steps strong { font-size: 13px; color: var(--ink); }
.help-steps p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 4px; }
.help-note { font-size: 11px; line-height: 1.8; padding: 15px; background: #f3f2fc; border-radius: 8px; color: #68617f; }
.syntax-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 10px 0 20px; }
.syntax-table th { text-align: left; color: var(--muted); font-weight: 550; padding: 10px; background: #f5f5fa; }
.syntax-table td { border-bottom: 1px solid var(--line); padding: 11px 10px; vertical-align: top; }
.syntax-table td:first-child { width: 52%; }
.syntax-table code { font-size: 11px; white-space: pre-wrap; }
#exercise-toolbar { flex-shrink: 0; }
.exercise-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f8f7fe; }
.exercise-title { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; font-size: 12px; font-weight: 600; text-align: left; color: var(--primary); }
.exercise-title span { overflow-wrap: anywhere; }
.exercise-toolbar .button { font-size: 11px; padding: 7px 10px; min-height: 34px; }
.exercise-list { padding: 0 10px; }
.exercise-choice { display: block; width: 100%; padding: 11px 8px; text-align: left; border-bottom: 1px solid var(--line); border-radius: 5px; }
.exercise-choice.current, .exercise-choice:hover { background: var(--selected); }
.exercise-choice strong { display: block; font-size: 11px; font-weight: 600; }
.exercise-choice small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.exercise-brief { margin-top: 15px; padding: 17px; border-top: 1px solid var(--line); }
.exercise-brief h3 { font-size: 12px; margin-bottom: 8px; }
.exercise-brief p, .exercise-brief li, .exercise-spec { font-size: 11px; line-height: 1.7; color: var(--muted); }
.exercise-spec { margin: 14px 0 0; }
.exercise-spec dt { font-weight: 600; color: var(--ink); margin-top: 9px; }
.exercise-spec dd { margin: 2px 0 0; }
.exercise-spec code { color: var(--ink); white-space: pre-wrap; }
.exercise-hints { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.exercise-hints h3 { display: flex; justify-content: space-between; }
.exercise-hints h3 span { font-size: 10px; color: var(--muted); font-weight: 500; }
.exercise-hints ol { margin: 10px 0; padding-left: 18px; }
.exercise-hints li { padding-left: 3px; margin: 8px 0; }
.exercise-hints .text-button { color: var(--primary); display: flex; text-align: left; }
.exercise-brief>[data-action="restart-exercise"] { font-size: 10px; margin-top: 16px; }
.check-summary { padding: 16px 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.check-summary strong { display: block; }
.check-summary p { color: var(--muted); font-size: 12px; margin-top: 6px; }
.check-success strong, .case-pass { color: #25715d; }
.check-warning strong, .case-fail { color: var(--danger); }
.check-case { margin: 0; border-top: 1px solid var(--line); }
.check-case summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 0; color: var(--ink); font-size: 12px; cursor: pointer; list-style: none; }
.check-case summary::-webkit-details-marker { display: none; }
.check-case summary::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.check-case[open]>summary::before { transform: rotate(45deg); }
.check-case summary>span:first-child { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.check-case summary>span:last-child { margin-left: auto; max-width: 50%; color: var(--muted); font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.check-case summary svg { width: 14px; height: 14px; flex-shrink: 0; }
.check-case dl { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 8px; font-size: 12px; line-height: 1.6; margin: 0 0 8px; }
.check-case dt { color: var(--muted); }
.check-case dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.check-case pre { margin: 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }
.check-case p { padding-bottom: 12px; font-size: 11px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.runtime-panel.showing-checks { overflow: hidden; }
.showing-checks #execution-status, .showing-checks .variables-section, .showing-checks .live-label { display: none; }
.showing-checks .console-section { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
.showing-checks #console-content { min-height: 0; max-height: none; padding: 0 16px 16px; scrollbar-gutter: stable; }
.showing-checks #run-controls { grid-column: 1 / -1; border-right: 0; flex-shrink: 0; }
.showing-checks .runtime-footnote { flex-shrink: 0; }
@media (min-width: 1600px) {
  .app-layout { grid-template-columns: 235px minmax(0, 1fr) 320px; margin-left: 30px; margin-right: 30px; }
  .code-pane { width: 43%; }
  #code-highlight, #code-editor { font-size: 12px; }
  .sidebar-section { padding-left: 20px; padding-right: 20px; }
  .palette-item { min-height: 61px; }
}
@media (max-width: 1200px) {
  .app-layout { grid-template-columns: 188px minmax(0, 1fr) 266px; margin-left: 12px; margin-right: 12px; }
  .app-header, .project-bar { padding-left: 22px; padding-right: 22px; }
  .sidebar-section { padding: 20px 12px; }
  .palette-item { padding: 8px; gap: 7px; }
  .palette-item small { font-size: 9px; }
  .sidebar-tabs { gap: 6px; padding: 0 10px; }
  .workspace-toolbar { padding: 0 10px; }
  .view-tabs button { padding: 6px 7px; }
  .block-count { display: none; }
  .view-split { flex-direction: column; }
  .view-split .diagram-pane { flex: 1; min-height: 240px; }
  .view-split .code-pane { width: 100%; min-width: 0; height: 42%; border-left: 0; border-top: 1px solid var(--line); }
  .runtime-heading, #run-controls, #execution-status { padding-left: 13px; padding-right: 13px; }
  .live-label { font-size: 8px; }
  .step-button { padding: 9px; }
}
@media (max-width: 920px) {
  .app-layout { grid-template-columns: 172px minmax(0, 1fr); height: auto; min-height: 0; overflow: visible; }
  .left-sidebar { border-radius: 12px 0 0 0; }
  .workspace { height: 700px; border-radius: 0 12px 0 0; overflow: hidden; }
  .runtime-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; border-radius: 0 0 12px 12px; overflow: hidden; }
  .runtime-heading { grid-column: 1 / -1; }
  #run-controls { border-right: 1px solid var(--line); }
  .variables-section { border-right: 1px solid var(--line); min-height: 180px; }
  .console-section { grid-column: 2; grid-row: 3; }
  .showing-checks #console-content { min-height: 180px; max-height: 440px; }
  .runtime-footnote { grid-column: 1 / -1; }
  .header-actions { gap: 15px; }
  .app-subtitle { font-size: 12px; }
  .local-badge { display: none; }
  .sidebar-tabs { gap: 4px; padding: 0 8px; }
  .sidebar-tabs button { font-size: 11px; }
  .workspace-footer>button { display: none; }
  .palette-item { gap: 4px; }
  .palette-item>svg { display: none; }
}
@media (max-width: 600px) {
  .app-header { height: 64px; padding: 0 16px; gap: 12px; }
  .brand { font-size: 27px; gap: 8px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .app-subtitle, .header-divider { display: none; }
  .header-actions .text-button { font-size: 11px; }
  .header-actions .text-button>svg { width: 16px; }
  .project-bar { height: 82px; padding: 0 14px; gap: 6px; }
  .project-name-wrap { gap: 7px; }
  .project-name-wrap>svg { display: none; }
  #project-title { width: 43vw; font-size: 14px; }
  #save-status { font-size: 9px; }
  .project-actions { gap: 2px; }
  .project-actions .button { padding: 8px; gap: 4px; min-height: 36px; }
  .project-actions .button span { display: none; }
  .project-actions .button svg { width: 17px; }
  .app-layout { display: flex; flex-direction: column; margin: 0 10px 15px; border-radius: 10px; overflow: hidden; }
  .left-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-tabs { height: 43px; gap: 22px; padding: 0 14px; }
  .sidebar-tabs button { font-size: 12px; }
  .exercise-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 10px; }
  .exercise-choice { border-bottom: 0; padding: 8px 5px; }
  .exercise-choice strong { font-size: 10px; }
  .exercise-choice small { display: none; }
  .exercise-brief { margin: 0; padding: 13px 14px; max-height: 310px; overflow-y: auto; }
  .exercise-toolbar { padding: 8px 10px; gap: 8px; }
  .exercise-title { font-size: 11px; }
  .exercise-title svg { display: none; }
  .exercise-toolbar .button { font-size: 10px; padding: 7px 8px; }
  #sidebar-content { overflow: visible; }
  .sidebar-section { padding: 13px 10px; }
  .palette-section>h2, .palette-section>p { display: none; }
  .palette { display: flex; margin: 0; gap: 5px; }
  .palette-item { flex-direction: column; gap: 4px; padding: 6px 2px; min-height: 60px; min-width: 0; flex: 1; }
  .palette-item>span:nth-child(2) { text-align: center; }
  .palette-item strong { font-size: 10px; font-weight: 550; }
  .palette-item small { display: none; }
  .palette-icon { width: 24px; height: 24px; }
  .palette-icon svg { width: 20px; height: 20px; }
  .lesson-note, .sidebar-bottom { display: none; }
  .intro { padding: 12px 14px 0; }
  .example-list { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; }
  .example-item { padding: 10px 6px; gap: 7px; margin: 0; }
  .example-item strong { font-size: 10px; }
  .example-item small { font-size: 9px; }
  .example-item>svg { display: none; }
  .inspector { padding: 12px 14px; }
  #node-form { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 10px; align-items: center; }
  #node-form label { margin: 0; }
  #node-form input, #node-form textarea { margin-bottom: 5px; }
  #node-form .field-help, #node-form .field-error, #node-form .button { grid-column: 1 / -1; }
  .workspace { height: 620px; border-radius: 0; }
  .workspace-toolbar { height: 52px; padding: 0 10px; justify-content: center; }
  .view-tabs { flex: 1; justify-content: center; }
  .view-tabs button { flex: 1; justify-content: center; font-size: 10px; padding: 7px 5px; gap: 4px; }
  .view-tabs svg { width: 14px; }
  .pane-title { padding: 0 13px; height: 40px; }
  .pane-title>span { font-size: 8px; }
  .workspace-footer { font-size: 8px; height: 32px; padding: 0 10px; }
  .runtime-panel { display: flex; flex-direction: column; }
  #run-controls, .variables-section { border-right: 0; }
  .runtime-heading { height: 48px; }
  #run-controls { padding-top: 14px; }
  .run-button { min-height: 42px; }
  .step-button { width: 110px; }
  .run-secondary { margin-top: 9px; }
  .run-secondary label, .run-secondary select { font-size: 12px; }
  .run-secondary select { width: 90px; }
  .run-secondary .icon-button { width: 36px; height: 32px; }
  .execution-state strong { font-size: 12px; }
  .execution-state p { font-size: 11px; }
  .variables-section { min-height: 0; }
  .variable-table td { font-size: 12px; }
  .empty-variables { padding: 12px; }
  .console-section { min-height: 190px; }
  #console-content { min-height: 140px; max-height: 260px; }
  .runtime-footnote { font-size: 10px; }
  dialog { padding: 20px; }
  .dialog-header h2 { font-size: 17px; }
  .syntax-table { font-size: 10px; }
  .syntax-table td { padding: 8px 5px; }
  .syntax-table code { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}