/* ------------------------------------------------------------------ * * PyViz - Python Code Visualizer (split-pane IDE) * ------------------------------------------------------------------ */ :root { --bg: #0b0e14; --panel: #12161f; --panel-2: #0e1219; --panel-3: #1a1f2b; --border: #232b3a; --border-soft: #1b2230; --text: #e6edf3; --muted: #8b95a5; --muted-2: #626d7d; --accent: #4c8dff; --accent-soft: rgba(76, 141, 255, 0.15); --accent-line: rgba(76, 141, 255, 0.55); --cell: #1c222e; --cell-border: #2b3444; --danger: #f85149; --ok: #3fb950; --c-keyword: #ff7b72; --c-string: #a5d6ff; --c-number: #79c0ff; --c-builtin: #d2a8ff; --c-func: #d2a8ff; --c-comment: #6a7686; --c-decorator: #f0b849; --editor-lh: 21px; --editor-pad: 12px; } /* ----- Themes ----------------------------------------------------------- :root above is the default "Dark". Selecting a theme sets data-theme on (see tools.js); these blocks re-tint the palette variables that drive the chrome, editor, and syntax highlighting. A few deep visualization colors are still hardcoded and may want per-theme tuning. */ [data-theme="light"] { --bg: #f6f8fa; --panel: #ffffff; --panel-2: #eef1f5; --panel-3: #e8edf2; --border: #d0d7de; --border-soft: #e4e9ee; --text: #1f2328; --muted: #57606a; --muted-2: #8b949e; --accent: #0969da; --accent-soft: rgba(9, 105, 218, 0.12); --accent-line: rgba(9, 105, 218, 0.5); --cell: #eef1f5; --cell-border: #d0d7de; --danger: #cf222e; --ok: #1a7f37; --c-keyword: #cf222e; --c-string: #0a3069; --c-number: #0550ae; --c-builtin: #8250df; --c-func: #8250df; --c-comment: #6e7781; --c-decorator: #953800; } [data-theme="midnight"] { --bg: #05060a; --panel: #0c0f1a; --panel-2: #080a12; --panel-3: #12162a; --border: #1e2540; --border-soft: #161c33; --text: #e8eaf6; --muted: #8890b5; --muted-2: #5b6488; --accent: #8b7bff; --accent-soft: rgba(139, 123, 255, 0.16); --accent-line: rgba(139, 123, 255, 0.55); --cell: #12162a; --cell-border: #232b4d; --danger: #ff6b81; --ok: #46d17a; --c-keyword: #ff8ba7; --c-string: #a5f3d0; --c-number: #9db8ff; --c-builtin: #c9b0ff; --c-func: #c9b0ff; --c-comment: #5b6488; --c-decorator: #ffcf7a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; overflow: hidden; } code, pre, textarea, .code-lines, .input-value { font-family: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; } #app { height: 100vh; width: 100%; /* fill the viewport: no dead side gutters */ padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; } /* -------------------------------------------------- toolbar -------- */ .toolbar { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: 0.3px; cursor: pointer; } .brand:hover { color: var(--accent); } .brand:hover .brand-icon { filter: brightness(1.2); } .brand-icon { width: 20px; height: 20px; fill: var(--accent); } .example-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .example-picker select { background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; text-transform: none; letter-spacing: 0; cursor: pointer; outline: none; } .example-picker select:hover { border-color: var(--accent); } .example-picker optgroup { background: var(--panel-2); color: var(--muted); font-style: normal; font-weight: 700; } .example-picker option { background: var(--panel-3); color: var(--text); font-weight: 400; } .spacer { flex: 1; } .tbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .tbtn svg { width: 15px; height: 15px; fill: currentColor; } .tbtn:hover { border-color: var(--accent); color: #fff; } .primary-tbtn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .primary-tbtn:hover { filter: brightness(1.1); color: #fff; } .primary-tbtn svg { fill: none; } /* "Keep this server running" — Ko-fi support link (an , not a button). Warm coral so it stands out from the blue tools; shown in every mode (including lite) so the hosted student build can cover its hosting. */ .kofi-btn { background: #ff5e5b; border-color: #ff5e5b; color: #fff; font-weight: 600; text-decoration: none; } .kofi-btn svg { fill: #fff; } .kofi-btn:hover { filter: brightness(1.08); border-color: #ff5e5b; color: #fff; } /* -------------------------------------------------- workspace ------ */ .workspace { flex: 1 1 auto; display: flex; gap: 8px; min-height: 0; } .left-pane { flex: 0 0 46%; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; } .right-pane { flex: 1 1 0; min-width: 0; overflow: auto; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } /* draggable splitters between editor / console / visualization */ .splitter { flex: 0 0 8px; border-radius: 4px; background: transparent; transition: background 0.12s; position: relative; } .col-splitter { cursor: col-resize; align-self: stretch; } .row-splitter { cursor: row-resize; } .splitter::after { content: ""; position: absolute; background: var(--border); border-radius: 3px; transition: background 0.12s; } .col-splitter::after { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 42px; } .row-splitter::after { top: 50%; left: 50%; transform: translate(-50%, -50%); height: 3px; width: 42px; } .splitter:hover::after, .splitter.dragging::after { background: var(--accent); } .splitter.dragging { background: var(--accent-soft); } /* -------------------------------------------------- editor --------- */ .editor-panel { flex: 0 0 58%; display: flex; flex-direction: column; min-height: 0; } .code-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-soft); padding: 8px 10px 8px 16px; flex: 0 0 auto; } .code-lang { font-weight: 700; font-size: 14px; color: #fff; position: relative; padding-bottom: 6px; } .code-lang::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); border-radius: 2px; } .code-head-actions { display: flex; gap: 4px; } .copied-flash { color: var(--ok) !important; } .code-editor { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } .gutter { flex: 0 0 46px; overflow: hidden; background: var(--panel-2); border-right: 1px solid var(--border-soft); padding: var(--editor-pad) 0; } .lnum { height: var(--editor-lh); line-height: var(--editor-lh); text-align: right; padding-right: 10px; color: var(--muted-2); font: 400 12px/var(--editor-lh) "SF Mono", Menlo, Consolas, monospace; } .lnum.current { color: var(--accent); font-weight: 700; } .lnum.errln { color: var(--danger); font-weight: 700; } .edit-area { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; } .hl, .code-textarea { margin: 0; position: absolute; inset: 0; padding: var(--editor-pad); font: 400 13px/var(--editor-lh) "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; tab-size: 4; white-space: pre; border: 0; } .hl { color: var(--text); pointer-events: none; z-index: 1; overflow: hidden; } .hl code { font: inherit; white-space: pre; } .code-textarea { z-index: 2; color: transparent; background: transparent; caret-color: var(--text); resize: none; outline: none; overflow: auto; } .line-band { position: absolute; left: 0; right: 0; height: var(--editor-lh); background: var(--accent-soft); border-left: 3px solid var(--accent); z-index: 0; pointer-events: none; display: none; } /* Indent guides: faint vertical rules through leading indentation. Sits behind the transparent editor text (z 0, like the exec band); an inner wrapper is translated to follow the code's scroll. */ .guide-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .guide-inner { position: absolute; top: 0; left: 0; will-change: transform; } .ind-guide { position: absolute; width: 1px; background: rgba(128, 144, 170, 0.16); } /* syntax tokens */ .tok-k { color: var(--c-keyword); } .tok-s { color: var(--c-string); } .tok-n { color: var(--c-number); } .tok-b { color: var(--c-builtin); } .tok-f { color: var(--c-func); } .tok-c { color: var(--c-comment); font-style: italic; } .tok-d { color: var(--c-decorator); } /* -------------------------------------------------- console -------- */ .console-panel { flex: 1 1 0; display: flex; flex-direction: column; min-height: 90px; } .console-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); flex: 0 0 auto; } .console-actions { display: flex; align-items: center; gap: 8px; } .console-body { overflow: auto; padding: 4px 0; } .cases-table { width: 100%; border-collapse: collapse; font-size: 13px; } .cases-table th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted-2); padding: 6px 10px; position: sticky; top: 0; background: var(--panel); } .cases-table td { padding: 4px 8px; border-top: 1px solid var(--border-soft); vertical-align: middle; } .c-num { width: 26px; color: var(--muted-2); text-align: center; } .c-del { width: 30px; } .c-actions { width: 60px; white-space: nowrap; text-align: right; } .case-row { cursor: pointer; } .case-row:hover { background: var(--panel-2); } .case-row.selected { background: var(--accent-soft); } .case-input { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; outline: none; } .case-input:focus { border-color: var(--accent); } .case-input.expected { color: var(--muted); } .case-result { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; white-space: nowrap; } .case-result .ok { color: var(--ok); } .case-result .bad { color: var(--danger); } .case-result .muted { color: var(--muted-2); } .case-del-btn { background: transparent; border: none; color: var(--muted-2); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; } .case-del-btn:hover { color: var(--danger); background: var(--panel-3); } .case-run-btn { background: transparent; border: none; color: var(--accent); cursor: pointer; font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 6px; } .case-run-btn:hover { color: #fff; background: var(--accent); } .case-row.selected .case-run-btn { color: #fff; } .primary-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; } .primary-btn:hover { filter: brightness(1.08); } .primary-btn .run-ic { width: 14px; height: 14px; fill: currentColor; } .ghost-btn { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .ghost-btn:hover { color: var(--text); border-color: var(--accent); } .editor-msg { font-size: 12px; color: var(--muted); } .editor-msg.error { color: var(--danger); } .console-hint { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted-2); } /* -------------------------------------------------- viz panel head - */ .viz-panel { display: flex; flex-direction: column; } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); } .titles { display: flex; flex-direction: column; gap: 2px; } .panel-head h1 { margin: 0; font-size: 16px; font-weight: 600; } .subtitle { font-size: 12px; color: var(--muted); } .head-right { display: flex; align-items: center; gap: 6px; } .step-counter { font-size: 13px; color: var(--muted); margin-right: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: 8px; cursor: pointer; color: var(--muted); padding: 0; } .icon-btn svg { width: 18px; height: 18px; fill: currentColor; } .icon-btn:hover { background: var(--panel-3); color: var(--text); } .icon-btn:disabled { opacity: 0.35; cursor: default; background: transparent; } /* -------------------------------------------------- transport ------ */ /* One flex row, everything centered on the same axis: buttons | speed. All transport icons share the 24px viewBox with glyphs drawn edge-to- edge (4.5..19.5), so every button renders at the same optical size. */ .transport { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 5px 18px 3px; } .transport-buttons { display: flex; align-items: center; gap: 6px; } .transport .icon-btn { width: 22px; height: 22px; flex: none; } .transport .icon-btn svg { width: 12px; height: 12px; display: block; } .t-sep { width: 1px; height: 13px; background: var(--border); margin: 0 4px; flex: none; } .icon-btn.play { background: var(--accent); color: #fff; width: 26px; height: 26px; border-radius: 50%; } .icon-btn.play:hover { background: var(--accent); filter: brightness(1.1); } .transport .icon-btn.play svg { width: 13px; height: 13px; } /* play/pause icon swap: keyed off the button's .playing class (SVG elements have no `hidden` property, so JS toggles the class, not the attribute) */ #btnPlay:not(.playing) .ic-pause { display: none; } #btnPlay.playing .ic-play { display: none; } #btnLoop.active { color: var(--accent); background: var(--panel-3); } .speed-control { display: inline-flex; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: none; } .speed-control button { background: transparent; border: none; color: var(--muted); padding: 4px 10px; font-size: 12px; line-height: 1; cursor: pointer; font-variant-numeric: tabular-nums; } .speed-control button.active { background: var(--accent); color: #fff; } .speed-control button:not(.active):hover { color: var(--text); } /* -------------------------------------------------- scrubber ------- */ .scrubber { position: relative; padding: 10px 18px 16px; } .scrubber-ticks { position: absolute; left: 18px; right: 18px; top: 18px; height: 8px; pointer-events: none; } .scrubber-ticks .tick { position: absolute; top: 0; width: 2px; height: 8px; background: var(--border); transform: translateX(-50%); border-radius: 1px; } .scrubber-ticks .tick.passed { background: var(--accent-line); } /* Milestone markers: clickable diamonds/flags on the scrubber track. */ .scrubber-markers { position: absolute; left: 18px; right: 18px; top: 12px; height: 20px; pointer-events: none; } .ms-marker { position: absolute; top: 0; transform: translateX(-50%); pointer-events: auto; border: none; background: none; cursor: pointer; padding: 0 2px; line-height: 1; font-size: 11px; color: var(--muted-2); opacity: 0.8; } .ms-marker:hover { opacity: 1; transform: translateX(-50%) scale(1.35); } .ms-marker.ms-result { color: var(--accent); } .ms-marker.ms-final { color: var(--ok); } .ms-marker.ms-deep, .ms-marker.ms-unwind { color: #f0a020; } .ms-marker.ms-invariant { color: #e5534b; opacity: 1; } .ms-marker.ms-loop { color: var(--muted-2); font-size: 8px; } /* Invariant tracker: pass/fail strip + status badge. */ .invariant-panel .inv-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .inv-expr { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text); flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-badge { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.3px; } .inv-badge.ok { color: #04210f; background: var(--ok); } .inv-badge.bad { color: #fff; background: #e5534b; } .inv-badge.na { color: var(--muted-2); background: var(--panel-3); } .inv-strip-wrap { flex: 1; min-width: 60px; } .inv-strip { display: block; width: 100%; height: 16px; border-radius: 4px; background: var(--panel-3); } .inv-run.ok { fill: var(--ok); opacity: 0.85; } .inv-run.bad { fill: #e5534b; } .inv-run.na { fill: var(--panel-3); } .inv-cursor { fill: var(--text); opacity: 0.9; } .inv-del { flex: 0 0 auto; border: none; background: none; color: var(--muted-2); cursor: pointer; font-size: 15px; } .inv-del:hover { color: #e5534b; } @keyframes inv-flash { 0% { background: rgba(229,83,75,0.35); } 100% { background: transparent; } } .inv-row.inv-flash { animation: inv-flash 0.5s ease-out; border-radius: 6px; } .scrubber-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--panel-3); border-radius: 4px; outline: none; accent-color: var(--accent); position: relative; z-index: 1; cursor: pointer; } .scrubber-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #0b0e14; cursor: pointer; box-shadow: 0 0 0 1px var(--accent); } .scrubber-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid #0b0e14; cursor: pointer; } /* -------------------------------------------------- input/output --- */ .input-box { margin: 4px 18px 0; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 14px; } .input-label { font-size: 11px; color: var(--muted); letter-spacing: 1px; font-weight: 600; } .input-value { font-size: 14px; color: var(--text); word-break: break-word; } .output-box { margin-top: 8px; } .output-box .input-label { color: var(--ok); } /* ------------------------------------------- foldable viz sub-sections */ /* Injected by js/foldable.js: a click-to-collapse header on every panel. The header sits inside the panel's own padding, so no extra inset. */ .fold-bar { width: 100%; box-sizing: border-box; background: none; border: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; padding: 0; font-family: inherit; color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; } .foldable:not(.folded) > .fold-bar { margin-bottom: 8px; } .fold-bar:hover, .fold-bar:hover .fold-chev { color: var(--text); } .fold-chev { width: 12px; color: var(--muted-2); flex: none; } .fold-chev::before { content: "\25BE"; font-size: 10px; display: inline-block; transition: transform 0.15s ease; } .foldable.folded > .fold-bar .fold-chev::before { transform: rotate(-90deg); } .foldable.folded > .fold-body { display: none; } /* -------------------------------------------------- variables ------ */ .variables { padding: 0; display: flex; flex-direction: column; gap: 8px; } .var-block { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 10px; } .var-name { font-size: 10px; letter-spacing: 1px; color: var(--muted); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; } .scalar-value { background: var(--panel-3); border: 1px solid var(--cell-border); border-radius: 6px; padding: 6px 8px; font-size: 20px; font-weight: 600; color: var(--accent); font-family: "SF Mono", Menlo, Consolas, monospace; transition: background 0.15s, color 0.15s; } .scalar-value.type-str { color: var(--c-string); font-size: 16px; } .scalar-value.type-bool { color: var(--c-keyword); } .scalar-value.type-none { color: var(--muted); } .scalar-value.changed { background: var(--accent-soft); } .array-cells { display: flex; gap: 6px; flex-wrap: wrap; } .cell-group { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 40px; } .cell { min-width: 42px; height: 34px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--cell); border: 1px solid var(--cell-border); border-radius: 6px; font-size: 16px; font-weight: 600; font-family: "SF Mono", Menlo, Consolas, monospace; transition: border-color 0.15s, background 0.15s; } .cell.pointed { border-width: 2px; } .cell.changed { background: var(--accent-soft); } .char-cell { min-width: 32px; width: 32px; font-size: 15px; } .cell-index { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .cell-pointers { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 16px; } .ptr { font-size: 12px; font-weight: 700; line-height: 1.1; font-family: "SF Mono", Menlo, Consolas, monospace; } .ptr-arrow { font-size: 10px; line-height: 1; } .kv-list { display: flex; flex-wrap: wrap; gap: 6px; } .kv { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-3); border: 1px solid var(--cell-border); border-radius: 8px; padding: 6px 10px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; } .kv .k { color: var(--c-number); } .kv .sep { color: var(--muted); } .kv .v { color: var(--text); } .set-chip { color: var(--c-string); } .kv.kv-changed { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); } .empty-tag { color: var(--muted); font-style: italic; font-size: 13px; } .truncated-note { color: var(--muted); font-size: 12px; margin-top: 6px; } /* -------------------------------------------------- 2D grid -------- */ .grid-table { display: inline-flex; flex-direction: column; gap: 5px; } .grid-col-headers { display: flex; gap: 5px; } .grid-corner { min-width: 24px; } .grid-col-head { min-width: 44px; text-align: center; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .grid-row { display: flex; align-items: center; gap: 5px; } .grid-row-head { min-width: 24px; text-align: right; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .grid-cell { min-width: 44px; height: 34px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--cell); border: 1px solid var(--cell-border); border-radius: 6px; font-size: 14px; font-weight: 600; font-family: "SF Mono", Menlo, Consolas, monospace; transition: background 0.15s, border-color 0.15s; } .grid-cell.empty { color: var(--muted-2); font-weight: 400; font-style: italic; } .grid-cell.changed { background: var(--accent-soft); border-color: var(--accent); color: #fff; } /* -------------------------------------------------- section block -- */ .section-block { margin: 12px 18px 0; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; } .block-label { font-size: 11px; letter-spacing: 1px; color: var(--muted); font-weight: 600; text-transform: uppercase; } .section-block .block-label { margin-bottom: 10px; } /* call stack */ .call-stack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .stack-end { font-size: 11px; color: var(--muted-2); } .stack-frames { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .stack-frame { background: var(--panel-3); border: 1px solid var(--cell-border); border-radius: 8px; padding: 8px 14px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; white-space: nowrap; } .stack-frame.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); } /* SVG trees */ .recursion-tree, .tree-view { overflow: auto; max-width: 100%; } .recursion-tree svg, .tree-view svg { display: block; margin: 0 auto; } /* The recursion tree is pan/zoomed instead of scrolled: fill a fixed-height viewport, clip overflow, and let the transformed move within it. */ .recursion-tree { overflow: hidden; height: 400px; max-width: none; cursor: grab; touch-action: none; user-select: none; background: var(--panel-3); border-radius: 8px; } .recursion-tree.grabbing { cursor: grabbing; } .recursion-tree svg { margin: 0; width: 100%; height: 100%; } .rt-viewport { will-change: transform; } .rt-edge { stroke: var(--cell-border); stroke-width: 1.5; fill: none; } .rt-edge.on-path { stroke: var(--accent); stroke-width: 2.5; } .rt-box { fill: var(--panel-3); stroke: var(--cell-border); stroke-width: 1.5; transition: fill 0.15s, stroke 0.15s; } .rt-node text { fill: var(--text); font: 600 12px "SF Mono", Menlo, monospace; } .rt-node.returned .rt-box { stroke: var(--ok); } .rt-node.has-tip { cursor: help; } /* Floating hover tooltip (full label for truncated recursion-tree nodes) */ .viz-tooltip { position: fixed; z-index: 1000; pointer-events: none; max-width: 420px; padding: 6px 10px; border-radius: 7px; background: #0b1220; border: 1px solid var(--border-soft); color: var(--text); font: 12.5px/1.45 "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); } .viz-tooltip[hidden] { display: none; } /* Active path = soft accent; the current call (frontier, top of stack) is solid and glows, so "where am I now" reads at a glance. */ .rt-node.active .rt-box { fill: var(--accent-soft); stroke: var(--accent); } .rt-node.frontier .rt-box { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(76, 141, 255, 0.85)); } .rt-node.frontier text { fill: #fff; } .rt-node.just-returned .rt-box { stroke: var(--ok); stroke-width: 2.5; } .rt-node.solution .rt-box { fill: #16281c; stroke: var(--ok); } .rt-node.deadend .rt-box { stroke: #6b7280; stroke-dasharray: 4 3; opacity: 0.75; } .rt-solmark { fill: #f5c451; font: 700 14px "SF Mono", Menlo, monospace; } .rt-ret { fill: var(--ok); font: 700 10px "SF Mono", Menlo, monospace; } /* Memoization ghosts: dashed green cache-hit stubs. */ .rt-ghost circle { fill: #14261b; stroke: var(--ok); stroke-width: 1.4; stroke-dasharray: 2 2; } .rt-ghost text { fill: var(--ok); font: 700 10px "SF Mono", Menlo, monospace; } .rt-ghost-edge { stroke: var(--ok); stroke-width: 1.3; stroke-dasharray: 3 3; opacity: 0.6; } .rt-ghost-more { fill: var(--muted); font: 700 10px "SF Mono", Menlo, monospace; } /* Header: title + live phase caption on the left, controls pushed right. */ .rt-head { display: flex; align-items: center; gap: 10px; } .rt-title { flex: 0 0 auto; } .rt-phase { flex: 1 1 auto; font-weight: 600; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-phase.phase-descend { color: var(--accent); } .rt-phase.phase-backtrack { color: #f0a020; } .rt-phase.phase-explore { color: var(--muted); } .rt-controls { display: flex; gap: 4px; margin-left: auto; } .rt-ctl, .mem-ctl { width: 28px; height: 28px; } /* Legend: colored swatches matching the node states in play this trace. */ .rt-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--muted); } .rt-legend .lg { display: inline-flex; align-items: center; gap: 5px; } .rt-legend .sw { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--cell-border); display: inline-block; box-sizing: border-box; } .rt-legend .sw.frontier { background: var(--accent); border-color: var(--accent); } .rt-legend .sw.active { background: var(--accent-soft); border-color: var(--accent); } .rt-legend .sw.returned { background: var(--panel-3); border-color: var(--ok); } .rt-legend .sw.solution { background: #16281c; border-color: var(--ok); } .rt-legend .sw.deadend { background: transparent; border-style: dashed; border-color: #6b7280; } .rt-legend .sw.ghost { background: #14261b; border-color: var(--ok); color: var(--ok); font-size: 9px; line-height: 10px; text-align: center; } /* Memory panel header: title left, fullscreen button right. */ .mem-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Fullscreen a section panel (recursion tree / memory): fill the screen and let the inner view grow into the space. rerenderRt refits the tree on the fullscreenchange event, and the memory canvas gets the full height to scroll. */ .section-block:fullscreen { width: 100%; height: 100%; margin: 0; border-radius: 0; overflow: auto; background: var(--bg); padding: 14px 18px; } .section-block:fullscreen .recursion-tree { height: calc(100vh - 92px); } .section-block:fullscreen .memory-body { max-height: none; height: calc(100vh - 84px); } .bt-edge { stroke: var(--cell-border); stroke-width: 1.5; fill: none; } .bt-node circle { fill: var(--cell); stroke: var(--cell-border); stroke-width: 1.5; transition: fill 0.15s; } .bt-node text { fill: var(--text); font: 600 13px "SF Mono", Menlo, monospace; } .bt-node.cursor circle { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(76, 141, 255, 0.75)); } .bt-node.cursor text { fill: #fff; } .bt-cursor-label { fill: var(--accent); font: 700 11px "SF Mono", Menlo, monospace; } /* Temporary threads (e.g. Morris traversal back-edges): dashed amber arcs. */ .bt-thread { stroke: #f0b849; stroke-width: 1.6; stroke-dasharray: 4 3; fill: none; opacity: 0.9; } .bt-thread-head { fill: #f0b849; opacity: 0.9; } /* linked list */ .linked-list { display: flex; align-items: center; flex-wrap: wrap; } .ll-node { display: flex; flex-direction: column; align-items: center; } .ll-box { min-width: 42px; height: 34px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--cell); border: 1px solid var(--cell-border); border-radius: 6px; font-size: 15px; font-weight: 600; font-family: "SF Mono", Menlo, Consolas, monospace; } .ll-node.cursor .ll-box { border-color: var(--accent); border-width: 2px; color: #fff; } .ll-cursor-tag { font-size: 11px; font-weight: 700; text-align: center; margin-top: 2px; } .ll-arrow { color: var(--muted-2); margin: 0 8px; font-size: 16px; align-self: flex-start; margin-top: 12px; } .ll-null { color: var(--muted-2); font-family: monospace; margin-left: 4px; align-self: flex-start; margin-top: 12px; } /* explanation + debug */ .debug-panel { margin: 0 18px 18px; background: #06080d; border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 12px; color: #9fb0c3; max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* -------------------------------------------------- error banner --- */ .error-banner { flex: 0 0 auto; background: rgba(248, 81, 73, 0.12); border: 1px solid rgba(248, 81, 73, 0.4); color: #ffb4ae; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-family: "SF Mono", Menlo, Consolas, monospace; } /* -------------------------------------------------- fullscreen ----- */ .panel:fullscreen { max-width: 100%; width: 100%; height: 100%; border-radius: 0; overflow: auto; background: var(--bg); } /* -------------------------------------------------- responsive ----- */ @media (max-width: 900px) { html, body { overflow: auto; } #app { height: auto; } /* banner/toolbar: wrap onto multiple rows instead of overflowing off-screen */ .toolbar { flex-wrap: wrap; gap: 8px; } .spacer { display: none; } .tbtn { padding: 6px 9px; font-size: 12px; gap: 5px; } .tbtn svg { width: 14px; height: 14px; } .brand { font-size: 15px; } .example-picker { font-size: 11px; } .example-picker select { padding: 5px 8px; font-size: 12px; max-width: 46vw; } .kofi-btn span { display: none; } /* long label -> heart icon only on mobile */ .workspace { flex-direction: column; } /* stack vertically; !important overrides any inline sizes set by dragging */ .left-pane, .right-pane { flex: 1 1 auto !important; } .editor-panel { flex: 0 0 auto !important; min-height: 340px; } .console-panel { flex: 0 0 auto; min-height: 200px; } .right-pane { overflow: visible; } .splitter { display: none; } .speed-control { position: static; margin-left: auto; } } /* -------------------------------------------------- graph ---------- */ .graph-view { overflow: auto; max-width: 100%; } .graph-view svg { display: block; margin: 0 auto; } .g-edge { stroke: var(--cell-border); stroke-width: 1.8; } .g-arrowhead { fill: var(--cell-border); } .g-node circle { fill: var(--panel-3); stroke: var(--cell-border); stroke-width: 1.8; transition: fill 0.15s, stroke 0.15s; } .g-node text { fill: var(--text); font: 700 13px "SF Mono", Menlo, monospace; } .g-node.visited circle { fill: #16281c; stroke: var(--ok); } .g-node.current circle { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 7px rgba(76, 141, 255, 0.85)); } .g-node.current text { fill: #fff; } .g-cursor-label { fill: var(--accent); font: 700 11px "SF Mono", Menlo, monospace; } .g-weight-bg { fill: var(--panel); stroke: var(--border-soft); stroke-width: 1; } .g-weight { fill: var(--c-number); font: 700 10px "SF Mono", Menlo, monospace; } .adj-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--border-soft); padding-top: 10px; } .adj-row { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; padding: 2px 6px; border-radius: 6px; display: flex; gap: 6px; } .adj-row.current { background: var(--accent-soft); } .adj-row.visited { color: var(--muted); } .adj-key { color: var(--c-number); font-weight: 700; min-width: 18px; } .adj-arrow { color: var(--muted-2); } .adj-neighbors { color: var(--text); } .adj-row.visited .adj-neighbors { color: var(--muted); } /* -------------------------------------------------- stdout / exception / cache / detail */ .stdout-body { margin: 0; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: #cbd5e1; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; background: #06080d; border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; } .lnum.errpath { color: #f0883e; } .exception-block { border-color: rgba(248, 81, 73, 0.5); background: rgba(248, 81, 73, 0.08); } .exception-block .block-label { color: var(--danger); } .exc-msg { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; color: #ffb4ae; font-weight: 600; margin-bottom: 8px; } .exc-trace { border-top: 1px solid rgba(248, 81, 73, 0.25); padding-top: 8px; display: flex; flex-direction: column; gap: 3px; } .exc-trace-title { font-size: 11px; color: var(--muted); margin-bottom: 2px; } .exc-frame { display: flex; gap: 10px; align-items: baseline; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; } .exc-where { color: var(--c-func); font-weight: 600; min-width: 90px; } .exc-line { color: var(--muted-2); min-width: 56px; } .exc-code { color: var(--text); } .cache-body { display: flex; flex-direction: column; gap: 4px; } .cache-row { display: flex; align-items: center; gap: 8px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; padding: 3px 6px; border-radius: 6px; } .cache-row.current { background: var(--accent-soft); } .cache-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ok); background: rgba(63, 185, 80, 0.15); padding: 1px 6px; border-radius: 4px; } .cache-call { color: var(--text); } .cache-eq { color: var(--muted-2); } .cache-val { color: var(--c-number); font-weight: 600; } /* -------------------------------------------------- stack / queue / heap / DSU / buckets / intervals */ .stack-view { display: flex; flex-direction: column-reverse; gap: 4px; align-items: flex-start; } .stack-item { display: flex; align-items: center; gap: 8px; } .stack-cell { min-width: 60px; padding: 8px 12px; background: var(--cell); border: 1px solid var(--cell-border); border-radius: 8px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; } .stack-cell.top { border-color: var(--accent); border-width: 2px; } .stack-cell.changed { background: var(--accent-soft); } .stack-tag { font-size: 11px; font-weight: 700; color: var(--accent); } .stack-idx { font-size: 11px; color: var(--muted-2); } .queue-view { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; } .queue-end { font-size: 11px; color: var(--muted-2); align-self: center; } .queue-cell { min-width: 42px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--cell); border: 1px solid var(--cell-border); border-radius: 6px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; } .queue-cell.changed { background: var(--accent-soft); border-color: var(--accent); } .queue-tag { font-size: 10px; color: var(--muted-2); text-align: center; margin-top: 2px; } .bt-node.heap circle { fill: var(--panel-3); } .dsu-view svg, .heap-view svg, .interval-view svg { display: block; margin: 0 auto; } .dsu-view, .heap-view, .interval-view { overflow: auto; max-width: 100%; } .bucket-view { display: flex; flex-direction: column; gap: 4px; } .bucket-row { display: flex; align-items: center; gap: 8px; } .bucket-idx { min-width: 26px; text-align: right; font-size: 11px; color: var(--muted-2); font-family: "SF Mono", monospace; } .bucket-slot { flex: 1; min-height: 26px; border: 1px dashed var(--border); border-radius: 6px; display: flex; gap: 5px; padding: 3px; flex-wrap: wrap; } .bucket-entry { background: var(--panel-3); border: 1px solid var(--cell-border); border-radius: 5px; padding: 2px 7px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; } .bucket-entry .bk { color: var(--c-number); } .bucket-entry .bv { color: var(--text); } .iv-bar { fill: var(--accent); opacity: 0.55; } .iv-bar.current { opacity: 1; } .iv-axis { stroke: var(--cell-border); stroke-width: 1; } .iv-tick { fill: var(--muted-2); font: 10px "SF Mono", monospace; } .iv-label { fill: var(--text); font: 600 11px "SF Mono", monospace; } .grid-cell.dep-source, .cell.dep-source { border-color: #f0883e !important; border-width: 2px; box-shadow: inset 0 0 0 1px rgba(240,136,62,0.4); } .grid-cell.dep-target, .cell.dep-target { border-color: var(--accent) !important; border-width: 2px; box-shadow: 0 0 0 2px var(--accent-soft); } .dp-arrow-layer { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 5; } .dp-arrow { stroke: #f0883e; stroke-width: 2; fill: none; opacity: 0.9; } .dp-arrowhead { fill: #f0883e; } .grid-block-wrap { position: relative; display: inline-block; } .g-edge.relax { stroke: var(--accent); stroke-width: 3; } /* -------------------------------------------------- trie / prefix tree */ .trie-view { overflow: auto; max-width: 100%; } .trie-view svg { display: block; margin: 0 auto; } .trie-edge { stroke: var(--cell-border); stroke-width: 1.5; } .trie-char { fill: var(--c-number); font: 700 12px "SF Mono", Menlo, monospace; paint-order: stroke; stroke: #0b1220; stroke-width: 3px; stroke-linejoin: round; } .trie-node circle { fill: var(--panel-3); stroke: var(--cell-border); stroke-width: 1.5; transition: fill 0.15s; } .trie-node.word-end circle { stroke: var(--ok); } .trie-end-ring { fill: none; stroke: var(--ok); stroke-width: 1.5; } .trie-node.cursor circle { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(76, 141, 255, 0.85)); } .trie-node.cursor.word-end .trie-end-ring { stroke: #fff; } .trie-cursor-label { fill: var(--accent); font: 600 11px "SF Mono", Menlo, monospace; } /* -------------------------------------------------- doubly / cycle linked list */ .ll-box.ll-cycle-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .ll-cycle { align-self: center; font: 600 12px "SF Mono", Menlo, monospace; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px; padding: 3px 8px; } /* -------------------------------------------------- grid traversal overlay */ .grid-cell.grid-visited { background: rgba(76, 141, 255, 0.16); } .grid-cell.grid-cursor { border-width: 2px; box-shadow: 0 0 0 2px var(--accent-soft); font-weight: 700; cursor: help; } .grid-cell.grid-cursor2 { border-color: #f0883e; border-width: 2px; cursor: help; } /* -------------------------------------------------- bit / binary view */ .bits-view { display: flex; flex-direction: column; gap: 6px; } .bits-cells { display: flex; gap: 3px; flex-wrap: wrap; } .bit-group { display: flex; flex-direction: column; align-items: center; gap: 2px; } .bit-cell { width: 26px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cell-border); border-radius: 5px; background: var(--panel-3); font-family: "SF Mono", Menlo, monospace; font-size: 15px; font-weight: 600; color: var(--muted-2); } .bit-cell.on { color: var(--c-number); border-color: var(--accent); background: var(--accent-soft); } .bit-cell.changed { box-shadow: 0 0 0 2px #f0883e; border-color: #f0883e; } .bit-idx { font-size: 10px; color: var(--muted-2); font-family: "SF Mono", monospace; } .bits-dec { font-family: "SF Mono", Menlo, monospace; font-size: 13px; color: var(--muted); } /* -------------------------------------------------- sliding window / adj-matrix pivot */ .cell.in-window { background: rgba(76, 141, 255, 0.14); border-color: rgba(76, 141, 255, 0.45); } .grid-cell.grid-pivot { background: rgba(240, 136, 62, 0.15); } /* -------------------------------------------------- segment tree / Fenwick */ .seg-idx { fill: var(--muted-2); font: 10px "SF Mono", monospace; } .fenwick-view { overflow: auto; max-width: 100%; } .fenwick-view svg { display: block; margin: 0 auto; } .fen-cell { fill: var(--panel-3); stroke: var(--cell-border); stroke-width: 1.5; } .fen-cell.changed { fill: var(--accent-soft); stroke: var(--accent); } .fen-val { fill: var(--text); font: 600 13px "SF Mono", monospace; } .fen-idx { fill: var(--muted-2); font: 10px "SF Mono", monospace; } .fen-bar { fill: rgba(76, 141, 255, 0.4); stroke: var(--accent); stroke-width: 1; } /* -------------------------------------------------- histogram / trapping water */ .hist-view { overflow: auto; max-width: 100%; } .hist-view svg { display: block; margin: 0 auto; } .hist-bar { fill: var(--accent); opacity: 0.8; } .hist-bar.changed { fill: #f0883e; opacity: 1; } .hist-water { fill: rgba(56, 189, 248, 0.45); } .hist-axis { stroke: var(--cell-border); stroke-width: 1.5; } .hist-val { fill: var(--text); font: 600 11px "SF Mono", monospace; } .hist-idx { fill: var(--muted-2); font: 10px "SF Mono", monospace; } .hist-water-total { margin-top: 6px; font: 13px "SF Mono", monospace; color: #38bdf8; } /* -------------------------------------------------- problem card --- */ .problem-card { margin: 0 0 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-3); overflow: hidden; } .problem-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; cursor: pointer; color: var(--text); padding: 9px 12px; font: inherit; text-align: left; } .problem-toggle:hover { background: rgba(255, 255, 255, 0.03); } .problem-caret { color: var(--muted-2); font-size: 11px; width: 12px; } .problem-head-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .problem-complexity { margin-left: auto; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--c-number); background: var(--accent-soft); border-radius: 5px; padding: 2px 8px; } .problem-body { padding: 0 14px 12px; } .problem-statement { margin: 0 0 10px; color: var(--text); font-size: 13.5px; line-height: 1.55; } .problem-takeaway { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.5; color: #cbd5e1; border-left: 3px solid var(--accent); padding: 4px 0 4px 10px; } .takeaway-label { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } /* -------------------------------------------------- complexity meter */ /* Compact single-line meter: value and label sit side by side. */ .complexity-panel { margin: 0 0 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-3); padding: 4px 10px; } .cx-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cx-metric { display: flex; flex-direction: row; align-items: baseline; gap: 5px; padding: 2px 8px; border-radius: 7px; background: var(--panel-2); } .cx-val { font: 700 12.5px "SF Mono", Menlo, Consolas, monospace; color: var(--text); } .cx-lbl { font-size: 9.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted-2); } .cx-scale-btn { margin-left: auto; background: var(--accent); border: none; color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .cx-scale-btn:hover { filter: brightness(1.1); } .cx-scale-btn:disabled { opacity: 0.6; cursor: default; } /* -------------------------------------------------- scaling plot */ .scale-panel { margin-top: 10px; border-top: 1px solid var(--border-soft); padding-top: 8px; overflow-x: auto; } .scale-loading { color: var(--muted); font-size: 13px; padding: 12px 4px; } .scale-title { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; } .scale-title b { color: var(--c-number); } .scale-panel svg { display: block; margin: 0 auto; } .scale-axis { stroke: var(--cell-border); stroke-width: 1.5; } .scale-ref { fill: none; stroke: #f0883e; stroke-width: 2.5; opacity: 0.55; stroke-dasharray: 5 4; } .scale-data { fill: none; stroke: var(--accent); stroke-width: 2; } .scale-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; } .scale-dot.capped { fill: var(--danger); } .scale-ptlabel { fill: var(--muted); font: 10px "SF Mono", monospace; } .scale-tick { fill: var(--muted-2); font: 10px "SF Mono", monospace; } .scale-axlabel { fill: var(--muted-2); font: 11px sans-serif; } .scale-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 4px; justify-content: center; flex-wrap: wrap; } .scale-legend .lg-data { color: var(--accent); } .scale-legend .lg-ref { color: #f0883e; } .scale-legend .lg-cap { color: var(--danger); } /* Case explorer: shape toggle-chips + size select, then overlaid curves. */ .case-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .case-lbl { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.4px; margin-left: 4px; } .case-lbl:first-child { margin-left: 0; } .case-chip { font: 12px "SF Mono", Menlo, monospace; padding: 3px 9px; border-radius: 999px; cursor: pointer; border: 1px solid var(--cell-border); background: var(--panel-3); color: var(--muted); border-left: 3px solid var(--cc, var(--cell-border)); transition: background 0.12s, color 0.12s; } .case-chip.on { background: var(--accent-soft); color: var(--text); border-color: var(--cc, var(--accent)); } .case-size { font: 12px "SF Mono", Menlo, monospace; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--cell-border); background: var(--panel-3); color: var(--text); } .case-run { font: 600 12px sans-serif; padding: 4px 12px; border-radius: 6px; cursor: pointer; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); } .case-curve { fill: none; stroke-width: 2; } .scale-legend .lg-case { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); } .scale-legend .lg-case::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--cc, var(--accent)); } /* The `hidden` attribute must win over author display rules (e.g. the recurrence card's display:flex), otherwise hidden panels leak through. */ [hidden] { display: none !important; } /* -------------------------------------------------- DP: recurrence card */ .recurrence-card { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-soft); border-left: 3px solid var(--c-number); background: var(--panel-3); display: flex; flex-direction: column; gap: 3px; } .rec-head { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); } .rec-formula { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; color: var(--text); } .rec-base { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); } .rec-live { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: var(--c-number); margin-top: 2px; } /* ------------------------------------------- visualization upgrades -- */ /* Gutter heatmap + run-to-line */ #gutter .lnum { cursor: pointer; } #gutter .lnum:hover { color: var(--text); } .lnum.hotln { box-shadow: inset 2px 0 0 var(--accent); font-weight: 700; } /* Loop-iteration chip (floats at the top-right of the explanation band) */ .loop-row { display: flex; justify-content: flex-end; margin: 6px 18px 0; } .loop-chip { font: 600 11px "SF Mono", Menlo, Consolas, monospace; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 20px; padding: 2px 9px; pointer-events: none; } /* Click-to-jump variable names */ .var-name-jump { cursor: pointer; } .var-name-jump:hover { color: var(--accent); text-decoration: underline dotted; } /* Memoization ghosts on the recursion tree (pruned, cache-answered calls) */ .rt-ghost circle { fill: rgba(63, 185, 80, 0.10); stroke: var(--ok); stroke-width: 1.4; stroke-dasharray: 3 3; } .rt-ghost text { fill: var(--ok); font: 700 10px "SF Mono", Menlo, monospace; } .rt-ghost-edge { stroke: var(--ok); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; } .rt-ghost-more { fill: var(--muted-2); font: 600 10px "SF Mono", Menlo, monospace; } /* Grid frontier (cells sitting in the BFS/DFS worklist) */ .grid-cell.grid-frontier { outline: 2px dashed var(--accent); outline-offset: -2px; } /* FLIP move animation: the travelling cell floats over its neighbors */ .cell.flip-move { position: relative; z-index: 3; } /* Watch panel (invariant sparklines) */ .watch-panel { margin: 0 18px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-2); padding: 10px 12px; } .watch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .watch-hint { font-size: 10.5px; color: var(--muted-2); } .watch-input { flex: 1 1 240px; min-width: 180px; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 400 12px "SF Mono", Menlo, Consolas, monospace; } .watch-input:focus { outline: none; border-color: var(--accent-line); } .watch-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .watch-rows:empty { display: none; } .watch-row { display: flex; align-items: center; gap: 10px; } .watch-expr { flex: 0 1 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--c-builtin); } .watch-val { min-width: 56px; text-align: right; font: 700 12px "SF Mono", Menlo, monospace; color: var(--text); } .watch-val.watch-nil { color: var(--muted-2); font-weight: 400; } .watch-spark-wrap { display: flex; align-items: center; gap: 6px; } .watch-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.4; } .watch-spark circle { fill: var(--c-decorator); } .watch-range { font-size: 10px; color: var(--muted-2); } .watch-del { margin-left: auto; background: none; border: none; color: var(--muted-2); font-size: 14px; cursor: pointer; padding: 0 4px; } .watch-del:hover { color: var(--danger); } /* Aliasing badges (same mutable object bound to several names) */ .alias-badge { margin-left: 8px; font-size: 10px; font-weight: 600; color: var(--c-decorator); background: rgba(240, 184, 73, 0.12); border: 1px solid rgba(240, 184, 73, 0.4); border-radius: 20px; padding: 1px 7px; cursor: help; } .alias-row-warning { margin: 2px 0 6px; font-size: 11.5px; font-weight: 600; color: var(--danger); background: rgba(248, 81, 73, 0.08); border: 1px solid rgba(248, 81, 73, 0.35); border-radius: 7px; padding: 5px 9px; } /* Index -> value dual display (monotonic stack/deque holding indices) */ .idx-note { font-size: 10.5px; color: var(--muted-2); margin-bottom: 4px; } .stack-cell.idx-cell, .queue-cell.idx-cell { display: flex; align-items: baseline; gap: 5px; } .idx-cell .idx-i { color: var(--muted); font-size: 11px; } .idx-cell .idx-arrow { color: var(--muted-2); font-size: 10px; } .idx-cell .idx-v { color: var(--text); font-weight: 700; } /* Unified linked-list: nodes carrying named pointer tags */ .ll-box.ll-tagged { box-shadow: 0 0 0 2px var(--accent-soft); } /* ---------------------------------------------- wave-2 viz upgrades -- */ /* windowed arrays: elision between captured segments */ .cell-gap { align-self: center; color: var(--muted-2); font: 600 10px "SF Mono", Menlo, monospace; padding: 0 4px; cursor: help; } .lnum.coldln { opacity: 0.45; } /* bar-mode toggle + canvas strips */ .bar-toggle { margin-left: 8px; background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--muted-2); font-size: 8px; letter-spacing: 1px; padding: 1px 5px; cursor: pointer; } .bar-toggle:hover { color: var(--text); border-color: var(--accent-line); } .bar-toggle.active { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .array-canvas { display: block; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--panel-2); } /* value ribbons */ .value-ribbon { display: block; margin-top: 4px; border-radius: 3px; cursor: pointer; opacity: 0.9; } .value-ribbon:hover { opacity: 1; } /* The per-variable ribbons belong to the Timeline feature; hide them with it when the Timeline panel is switched off in the visualization settings. */ .hide-value-ribbons .value-ribbon { display: none; } /* why? popover */ .why-popover { position: fixed; z-index: 80; width: 290px; background: var(--panel); border: 1px solid var(--accent-line); border-radius: 10px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); padding: 10px 12px; font-size: 12px; } .why-head { font-weight: 700; color: var(--c-decorator); margin-bottom: 6px; font-family: "SF Mono", Menlo, monospace; } .why-body { color: var(--muted); line-height: 1.5; } .why-line { margin-bottom: 3px; } .why-code { display: block; background: var(--panel-3); border: 1px solid var(--border-soft); border-radius: 6px; padding: 4px 7px; margin: 4px 0; color: var(--text); font-size: 11.5px; white-space: pre; overflow-x: hidden; } .why-detail { color: var(--accent); font-family: "SF Mono", Menlo, monospace; font-size: 11.5px; margin: 4px 0; } .why-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; } .why-feeder { color: var(--c-decorator); } [data-why] { cursor: help; } /* timeline (space-time heatmap) */ .timeline-panel { padding: 8px 10px; } .timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .timeline-select { font-size: 11px; padding: 3px 6px; } .timeline-body { margin-top: 8px; } .tl-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted-2); } .tl-grad { width: 74px; height: 9px; border-radius: 5px; display: inline-block; border: 1px solid var(--border-soft); /* mirrors the canvas ramp: hsl(215 -> 25, 70%, 28% -> 62%) */ background: linear-gradient(90deg, hsl(215, 70%, 28%), hsl(167, 70%, 36%), hsl(120, 70%, 45%), hsl(72, 70%, 53%), hsl(25, 70%, 62%)); } .tl-lo, .tl-hi { font-variant-numeric: tabular-nums; color: var(--muted); } .tl-axis-x { font-size: 10px; color: var(--muted-2); margin: 0 0 3px 18px; } .tl-row { display: flex; align-items: stretch; gap: 4px; } .tl-axis-y { writing-mode: vertical-rl; font-size: 10px; color: var(--muted-2); display: flex; align-items: center; width: 14px; flex: none; transform: rotate(180deg); } .tl-tooltip { position: fixed; z-index: 90; pointer-events: none; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; font: 600 10.5px "SF Mono", Menlo, monospace; color: var(--text); white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } .timeline-wrap { position: relative; display: inline-block; max-width: 100%; overflow-x: auto; } #timelineCanvas { display: block; border: 1px solid var(--border-soft); border-radius: 6px; cursor: pointer; } .timeline-marker { position: absolute; left: 0; right: 0; background: rgba(230, 237, 243, 0.25); border-top: 1px solid #e6edf3; pointer-events: none; display: none; } .timeline-hint { margin-top: 5px; font-size: 10.5px; color: var(--muted-2); } /* projection column */ .proj-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .proj-item { position: absolute; right: 10px; height: var(--editor-lh); line-height: var(--editor-lh); font: 400 10.5px "SF Mono", Menlo, monospace; color: var(--muted-2); background: rgba(18, 22, 31, 0.85); border-left: 2px solid var(--border); padding: 0 6px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proj-item.current { color: var(--c-decorator); border-left-color: var(--c-decorator); } #projBtn.active, #soundBtn.active, #quizBtn.active { color: var(--accent); } /* quiz (predict mode) */ .quiz-score { position: absolute; top: -6px; right: -8px; font: 700 9px "SF Mono", Menlo, monospace; background: var(--accent); color: #fff; border-radius: 12px; padding: 1px 5px; } #quizBtn { position: relative; } .quiz-card { position: fixed; z-index: 85; right: 26px; bottom: 26px; width: 340px; background: var(--panel); border: 1px solid var(--c-decorator); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); padding: 12px 14px; } .quiz-title { font-weight: 700; color: var(--c-decorator); font-size: 12.5px; margin-bottom: 6px; } .quiz-line { display: block; background: var(--panel-3); border: 1px solid var(--border-soft); border-radius: 6px; padding: 5px 8px; font-size: 11.5px; color: var(--text); white-space: pre; overflow: hidden; margin-bottom: 7px; } .quiz-ask { font-size: 12.5px; color: var(--muted); margin-bottom: 7px; } .quiz-ask code { color: var(--accent); font-weight: 700; } .quiz-kind { font: 600 10px "SF Mono", Menlo, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; text-transform: uppercase; letter-spacing: 0.4px; } .quiz-bool { flex: 1; background: var(--bg-inset, #14161c); border: 1px solid var(--line); border-radius: 8px; color: var(--fg); font: 700 12.5px "SF Mono", Menlo, monospace; padding: 6px 0; cursor: pointer; } .quiz-bool:hover, .quiz-bool:focus { border-color: var(--accent-line); outline: none; } .quiz-bool kbd { font: 600 10px "SF Mono", Menlo, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; } .quiz-row { display: flex; gap: 8px; } .quiz-input { flex: 1; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 400 12.5px "SF Mono", Menlo, monospace; } .quiz-input:focus { outline: none; border-color: var(--accent-line); } .quiz-result { margin-top: 8px; font: 700 12.5px "SF Mono", Menlo, monospace; } .quiz-result.ok { color: var(--ok); } .quiz-result.bad { color: var(--danger); } /* suggested watch chips */ .watch-suggest { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .watch-suggest-label { font-size: 10.5px; color: var(--muted-2); } .watch-chip { background: none; border: 1px dashed var(--accent-line); color: var(--accent); border-radius: 20px; padding: 2px 9px; font: 600 11px "SF Mono", Menlo, monospace; cursor: pointer; } .watch-chip:hover { background: var(--accent-soft); } /* micro-animations */ @keyframes stack-slide-in { from { transform: translateY(-8px); opacity: 0.2; } to { transform: translateY(0); opacity: 1; } } .stack-item.stack-in { animation: stack-slide-in 180ms ease; } @keyframes node-pulse { 0% { stroke-width: 2; } 50% { stroke-width: 6; } 100% { stroke-width: 2; } } .g-node.pulse circle { animation: node-pulse 360ms ease; } .bt-node.heap.cursor circle { animation: node-pulse 360ms ease; } /* ---------------------------------------------- toolbar popovers ---- */ .toolbar { position: relative; } .pop { position: absolute; top: calc(100% + 8px); right: 12px; z-index: 95; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 250px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55); } .pop-label { font: 700 10px "SF Mono", Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 8px 0 6px; } .pop-label:first-child { margin-top: 0; } /* study timer */ .timer-readout { font-variant-numeric: tabular-nums; font-weight: 700; } #timerBtn.running { color: var(--accent); } #timerBtn.finished { color: var(--danger); } .timer-modes { display: flex; gap: 6px; } .timer-mode { flex: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); padding: 7px 0; cursor: pointer; font-size: 12.5px; } .timer-mode.active { background: var(--accent); color: #fff; border-color: var(--accent); } .timer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .timer-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); padding: 6px 0; cursor: pointer; font-size: 12px; font-variant-numeric: tabular-nums; } .timer-chip.active { background: var(--panel-3); color: var(--text); border-color: var(--accent-line); } .timer-display { text-align: center; font: 700 34px "SF Mono", Menlo, monospace; color: var(--text); margin: 14px 0 12px; font-variant-numeric: tabular-nums; } .timer-actions { display: flex; gap: 8px; } .timer-go, .timer-rst { flex: 1; border-radius: 8px; padding: 8px 0; cursor: pointer; font-size: 13px; border: 1px solid var(--border); } .timer-go { background: rgba(63, 185, 80, 0.15); color: var(--ok); border-color: rgba(63, 185, 80, 0.4); } .timer-rst { background: var(--panel-2); color: var(--muted); } /* settings popovers */ .set-pop { min-width: 265px; } .set-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); padding: 5px 0; justify-content: space-between; } .set-row input[type="checkbox"] { order: -1; accent-color: var(--accent); } .set-row:has(input[type="checkbox"]) { justify-content: flex-start; } .set-select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; padding: 3px 6px; } .set-gear { width: 10px !important; height: 10px !important; margin-left: -4px; opacity: 0.8; } /* user-hidden viz panels: beats the renderers' per-step hidden flips */ [data-user-hidden] { display: none !important; } /* editor font size (settings) */ .code-textarea, .gutter { font-size: var(--editor-fs, 13px); } /* word-completion popup */ .cc-box { position: fixed; z-index: 120; min-width: 160px; max-width: 260px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); overflow: hidden; font: 12.5px "SF Mono", Menlo, monospace; } .cc-item { padding: 4px 10px; color: var(--muted); cursor: pointer; white-space: nowrap; } .cc-item b { color: var(--accent); font-weight: 700; } .cc-item.active, .cc-item:hover { background: var(--panel-3); color: var(--text); } /* ---------------------------------------------------- help modal ---- */ .help-dialog { width: min(1060px, 100%); } .help-body { overflow-y: auto; padding: 14px 16px; } .help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; } .help-card { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 11px 13px; } .help-card-title { font: 700 11px "SF Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .help-kbd { border-collapse: collapse; width: 100%; font-size: 12.5px; } .help-kbd td { padding: 3px 6px 3px 0; color: var(--text); vertical-align: top; } .help-kbd td:first-child { white-space: nowrap; color: var(--muted); width: 40%; } .help-kbd kbd, .help-note kbd { font: 600 11px "SF Mono", Menlo, monospace; color: var(--text); background: var(--panel-3); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; } .help-list { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.55; color: var(--text); } .help-list li { margin-bottom: 5px; } .help-list b { color: var(--text); } .help-list code { font: 11.5px "SF Mono", Menlo, monospace; color: var(--c-decorator, #d2a8ff); background: var(--panel-3); border-radius: 4px; padding: 0 4px; } .help-note { margin-top: 8px; font-size: 11.5px; color: var(--muted); } /* ------------------------------------------------ IntelliSense ------ */ .lint-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .lint-band { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); } .lint-band.err { color: var(--danger); } .lint-band.warn { color: #d29922; } .lnum.lint-err { color: var(--danger) !important; font-weight: 700; } .lnum.lint-warn { color: #d29922 !important; } .cc-detail { color: var(--muted-2); margin-left: 10px; font-size: 11px; float: right; max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .sig-box { position: fixed; z-index: 120; max-width: 460px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font: 12px "SF Mono", Menlo, monospace; } .sig-box code { color: var(--accent); font-weight: 600; } .sig-doc { color: var(--muted); margin-top: 3px; font-size: 11px; } /* transient viz-panel feedback pill (jump-to-change, etc.) */ .viz-toast { position: fixed; z-index: 100; pointer-events: none; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font: 600 11.5px "SF Mono", Menlo, monospace; color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } /* run-in-progress state on the Run button */ #runBtn.running { opacity: 0.75; cursor: progress; } #runBtn:disabled { pointer-events: none; } /* practice-first bar (reference solution hidden) */ .practice-bar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: rgba(76, 141, 255, 0.08); border-bottom: 1px solid var(--border-soft); font-size: 12px; color: var(--muted); } .practice-msg b { color: var(--text); } .practice-bar .reveal-btn { margin-left: auto; flex: none; background: var(--panel-2); border: 1px solid var(--accent-line); color: var(--accent); border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; } .practice-bar .reveal-btn:hover { background: var(--panel-3); } .help-dim { color: var(--muted-2); font-size: 10.5px; } /* ------------------------------------------------------- coach ------ */ .coach-dialog { width: min(900px, 100%); } .coach-context { padding: 8px 16px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--border-soft); } .coach-context code { font: 11px "SF Mono", Menlo, monospace; color: var(--accent); background: var(--panel-2); border-radius: 4px; padding: 0 5px; } .coach-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 16px 0; } .coach-crumb { background: transparent; border: none; cursor: pointer; font-size: 12px; color: var(--accent); padding: 2px 4px; border-radius: 5px; } .coach-crumb:hover { background: var(--panel-2); } .coach-crumb.cur { color: var(--text); font-weight: 700; cursor: default; } .coach-sep { color: var(--muted-2); font-size: 12px; } .coach-body { overflow-y: auto; padding: 10px 16px 16px; } .coach-detail { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 6px 0 12px; } .coach-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 10px; } .coach-card { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 11px 13px; cursor: pointer; color: var(--text); } .coach-card:hover { border-color: var(--accent-line); background: var(--panel-3); } .coach-card.rec { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line) inset; } .coach-card-title { font-weight: 700; font-size: 13px; } .coach-badge { font: 700 9px "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: rgba(76, 141, 255, 0.12); border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px; } .coach-when { font-size: 12px; color: var(--muted); line-height: 1.45; } .coach-more { font-size: 11px; color: var(--muted-2); margin-top: auto; } .coach-steps { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; } .coach-step { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text); background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 11px; cursor: pointer; } .coach-step input { accent-color: var(--accent); margin-top: 2px; flex: none; } .coach-step:has(input:checked) { opacity: 0.55; } .coach-step:has(input:checked) span { text-decoration: line-through; } .coach-leafnote { margin-top: 12px; font-size: 11.5px; color: var(--muted-2); } /* coach: corpus-evidence strip + example links */ .coach-evidence { background: var(--panel-2); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 12px; margin: 4px 0 12px; font-size: 11.5px; color: var(--muted); line-height: 1.6; } .coach-ev-label { display: inline-block; font: 700 9.5px "SF Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-right: 8px; } .coach-ev-row { margin-top: 3px; } .coach-ev-row b { color: var(--text); } .coach-ev-row code { font: 11px "SF Mono", Menlo, monospace; color: var(--text); background: var(--panel-3); border-radius: 4px; padding: 0 4px; } .coach-ex-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-soft); } .coach-ex { background: var(--panel-2); border: 1px solid var(--accent-line); color: var(--accent); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .coach-ex:hover { background: var(--panel-3); } /* --- Aligned array groups: arrays sharing an index variable stack together --- */ .aligned-group { position: relative; display: inline-block; border: 1px dashed var(--cell-border); border-radius: 10px; padding: 8px 12px 6px; margin: 4px 0; } .aligned-caption { font-size: 10px; color: var(--muted-2); margin-bottom: 4px; letter-spacing: 0.4px; text-transform: uppercase; } /* Uniform columns: --cw is the widest formatted value (in ch) across the group. */ .aligned-group .cell { min-width: calc(var(--cw, 2) * 1ch + 18px); } .aligned-group .cell-group { min-width: calc(var(--cw, 2) * 1ch + 18px); } /* Cross-array dependency source (the cost[i] read feeding a dp[i] write). */ .grid-cell.dep-source-x, .cell.dep-source-x { border-color: #2dd4bf !important; border-width: 2px; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.4); } /* --- Two-sequence DP grids: character labels on the axes --- */ .grid-head-char { display: block; font-size: 12px; font-weight: 700; color: var(--accent); font-family: "SF Mono", Menlo, Consolas, monospace; } .grid-row-head .grid-head-char { text-align: right; } /* --- Dict values that are indices: what the value points AT --- */ .kv-idx { font-size: 11px; color: #2dd4bf; font-family: "SF Mono", Menlo, Consolas, monospace; margin-left: 2px; } /* --- Value-flow animation: a chip flies from source cell to destination --- */ .variables { position: relative; } .flow-chip { position: absolute; z-index: 30; pointer-events: none; padding: 5px 9px; border-radius: 8px; background: var(--accent); color: #fff; font: 600 13px "SF Mono", Menlo, Consolas, monospace; box-shadow: 0 2px 10px rgba(76, 141, 255, 0.45); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } .cell.flow-dst, .grid-cell.flow-dst { outline: 2px solid var(--accent); outline-offset: 1px; } /* -------- recursion tree: fullscreen, phase caption, backtracking lens ---- */ .block-label.rt-head { display: flex; align-items: center; gap: 10px; } .rt-head .rt-title { flex: 0 0 auto; } .rt-phase { font-size: 10.5px; letter-spacing: 0.2px; text-transform: none; font-weight: 500; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-phase.phase-descend { color: var(--accent); } .rt-phase.phase-backtrack { color: #f0a020; } .rt-controls { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 1px; } .rt-ctl { width: 26px; height: 26px; } .rt-ctl svg { width: 15px; height: 15px; } .rt-ctl.active { color: var(--accent); background: var(--accent-soft); } /* The current (deepest) call - the search frontier - stands out from the rest of the highlighted active path. */ .rt-node.frontier circle { stroke-width: 3.5; filter: drop-shadow(0 0 9px rgba(76, 141, 255, 0.95)); } /* A node we returned from on THIS step: flash the backtrack. */ .rt-node.just-returned circle { stroke: #f0a020; stroke-width: 2.5; } /* Backtracking outcomes override the plain "returned" green stroke, so a dead end no longer looks like a success. Declared after .rt-node.returned so they win on equal specificity. */ .rt-node.solution circle { fill: var(--ok); stroke: var(--ok); } .rt-node.solution text { fill: #04210f; } .rt-node.deadend circle { stroke: var(--muted-2); stroke-dasharray: 3 3; opacity: 0.5; } .rt-node.deadend text { opacity: 0.6; } .rt-solmark { fill: var(--ok); font: 700 13px "SF Mono", Menlo, monospace; } .rt-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: 10.5px; color: var(--muted-2); } .rt-legend .lg { display: inline-flex; align-items: center; gap: 5px; } .rt-legend .sw { width: 11px; height: 11px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; background: var(--panel-3); border: 1.5px solid var(--cell-border); } .rt-legend .sw.active { background: var(--accent); border-color: var(--accent); } .rt-legend .sw.frontier { border-color: var(--accent); box-shadow: 0 0 5px rgba(76, 141, 255, 0.9); } .rt-legend .sw.returned { border-color: var(--ok); } .rt-legend .sw.solution { background: var(--ok); border-color: var(--ok); } .rt-legend .sw.deadend { border-style: dashed; border-color: var(--muted-2); opacity: 0.6; } .rt-legend .sw.ghost { color: var(--ok); border-color: var(--ok); border-style: dashed; } /* Fullscreen: fill the screen, dark bg, roomy scroll for a big search tree. */ .section-block:fullscreen { margin: 0; border-radius: 0; overflow: auto; background: var(--bg); padding: 18px 24px; display: flex; flex-direction: column; } .section-block:fullscreen #recursionTree { flex: 1; height: auto; max-height: none; } /* --- Narration read-along: subtitle-style transcript window --------------- */ .narration-body { display: flex; flex-direction: column; gap: 2px; } .narr-line { display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 3px 8px; border-radius: 6px; font-size: 13px; line-height: 1.35; border-left: 3px solid transparent; transition: background 0.12s; } .narr-line:hover { background: var(--panel-3); } .narr-line .narr-step { flex: 0 0 auto; font-size: 10px; color: var(--muted-2); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; } .narr-line .narr-text { flex: 1; } .narr-line.past { opacity: 0.5; } .narr-line.future { opacity: 0.35; } .narr-line.current { opacity: 1; background: var(--accent-soft); font-weight: 600; } .narr-line.current .narr-step { color: var(--accent); } /* kind accents on the current line's left border */ .narr-line.narr-call { border-left-color: var(--accent); } .narr-line.narr-return { border-left-color: #f0a020; } .narr-line.narr-branch { border-left-color: #a371f7; } .narr-line.narr-assign { border-left-color: var(--ok); } .narr-line.future .narr-text { color: var(--muted); } /* --- Binary-heap dual view: flat array + tree, linked on hover ------------- */ .heap-dual { display: flex; flex-direction: column; gap: 8px; } .heap-map-note { font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.2px; } .heap-array { display: flex; gap: 4px; flex-wrap: wrap; } .heap-cell { display: flex; flex-direction: column; align-items: center; min-width: 34px; border: 1px solid var(--cell-border); border-radius: 6px; padding: 3px 7px; background: var(--panel-3); transition: border-color 0.12s, box-shadow 0.12s; } .heap-cell-val { font: 600 14px "SF Mono", Menlo, Consolas, monospace; color: var(--text); } .heap-cell-idx { font-size: 10px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .heap-cell.changed { background: var(--accent-soft); } .heap-idx { fill: var(--muted-2); font: 9px "SF Mono", Menlo, monospace; } /* linked highlight across BOTH views (self = accent, parent = amber, child = teal) */ .heap-cell.hl-self { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .heap-cell.hl-parent { border-color: #f0a020; } .heap-cell.hl-child { border-color: #2dd4bf; } .bt-node.hl-self circle { stroke: var(--accent); stroke-width: 3; } .bt-node.hl-parent circle { stroke: #f0a020; stroke-width: 2.5; } .bt-node.hl-child circle { stroke: #2dd4bf; stroke-width: 2.5; } /* --- Memory / reference view: frame names -> heap object boxes + arrows ---- */ .memory-body { overflow: auto; max-height: 460px; } .mem-canvas { position: relative; min-height: 36px; } .mem-arrows { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; } .mem-arrow { fill: none; stroke: var(--muted-2); stroke-width: 1.6; opacity: 0.85; } .mem-arrow.aliased { stroke: #f0a020; stroke-width: 2.2; opacity: 1; } .mem-ahead { fill: var(--muted-2); } .mem-slot { position: absolute; left: 0; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 8px; box-sizing: border-box; background: var(--panel-3); border: 1px solid var(--cell-border); border-radius: 6px; } .mem-name { font: 600 12px "SF Mono", Menlo, Consolas, monospace; color: var(--text); } .mem-inline { font: 12px "SF Mono", Menlo, Consolas, monospace; color: var(--muted); margin-left: auto; } .mem-ptr { margin-left: auto; color: var(--accent); font-size: 12px; line-height: 1; } .mem-box { position: absolute; box-sizing: border-box; overflow: hidden; border: 1px solid var(--cell-border); border-radius: 8px; background: var(--panel-2); } .mem-box.aliased { border-color: #f0a020; box-shadow: 0 0 0 2px rgba(240, 160, 32, 0.18); } .mem-box-head { font: 600 10px "SF Mono", Menlo, monospace; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted-2); padding: 4px 8px; background: var(--panel-3); border-bottom: 1px solid var(--cell-border); } .mem-box.aliased .mem-box-head { color: #f0a020; } .mem-cell { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; font: 12px "SF Mono", Menlo, Consolas, monospace; } .mem-cell-label { color: var(--muted-2); min-width: 14px; } .mem-cell-val { margin-left: auto; color: var(--text); } /* ---------------------------------------------------- lite mode ------ */ /* CODEVIZ_LITE=1: hide the corpus/notes entry points for a stateless student deploy (no problems.db / datasets / notes.db). Server also disables the matching endpoints; this just keeps the UI honest with no flash. */ body.lite #dbBtn, body.lite #randomBtn, body.lite #notesBtn, body.lite #coachBtn, body.lite #saveMyBtn { display: none !important; } /* Hide the Problem Description pane (and its splitter) outright: lite has no problem corpus, so there is nothing to describe - hand the full width to the editor + visualization. */ body.lite #descPane, body.lite #descSplitter { display: none !important; } /* -------------------------------------------------- feedback modal -- */ /* Small dialog reusing the .db-modal shell (browser.css); posts to a form-to-email backend (Web3Forms) - see feedback.js. */ .fb-dialog { width: min(460px, 100%); height: auto; max-height: min(90vh, 640px); } .fb-form { display: flex; flex-direction: column; gap: 13px; padding: 16px; overflow: auto; } .fb-intro { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .fb-row { display: flex; flex-direction: column; gap: 5px; } .fb-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .fb-optional { text-transform: none; letter-spacing: 0; color: var(--muted-2); } .fb-select { max-width: none; } .fb-input, .fb-textarea { background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; outline: none; } .fb-input:focus, .fb-textarea:focus { border-color: var(--accent); } .fb-textarea { resize: vertical; min-height: 92px; line-height: 1.45; } .fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .fb-actions { display: flex; align-items: center; gap: 12px; margin-top: 2px; } .fb-status { flex: 1; font-size: 12.5px; color: var(--muted); } .fb-status.fb-ok { color: #33d17a; } .fb-status.fb-err { color: #ff6b6b; } /* ------------------------------------------ about / maker's-note modal */ /* Centered welcome note opened from the PyViz logo (reuses .db-modal shell). */ .about-dialog { width: min(480px, 100%); height: auto; max-height: min(88vh, 560px); } .about-body { padding: 22px 22px 18px; overflow: auto; display: flex; flex-direction: column; gap: 11px; } .about-body p { margin: 0; line-height: 1.65; font-size: 14px; color: var(--text); } .about-greeting { font-weight: 600; } .about-signoff { color: var(--muted); } .about-actions { margin-top: 8px; display: flex; justify-content: flex-end; } /* ------------------------------------- console "?" help icon + dialog */ .help-ic { background: none; border: 0; padding: 0; margin-left: 6px; cursor: pointer; color: var(--muted-2); vertical-align: middle; display: inline-flex; } .help-ic svg { width: 14px; height: 14px; fill: currentColor; } .help-ic:hover { color: var(--accent); } .cases-help-dialog { width: min(440px, 100%); height: auto; max-height: min(88vh, 620px); } .cases-help-body { padding: 18px 20px; overflow: auto; font-size: 13px; line-height: 1.55; color: var(--text); } .cases-help-body p { margin: 0 0 8px; } .cases-help-body code { background: var(--cell); border: 1px solid var(--cell-border); border-radius: 5px; padding: 1px 5px; font-size: 12px; } .ht-way { margin-top: 14px; color: var(--accent); font-weight: 600; } .ht-sub { color: var(--muted); font-weight: 400; } .ht-ex { width: fit-content; max-width: 100%; margin: 5px 0; padding: 5px 10px; background: var(--cell); border: 1px solid var(--cell-border); border-radius: 6px; font-family: "SF Mono", Menlo, monospace; font-size: 12.5px; overflow-x: auto; } .ht-list { margin: 4px 0 8px; padding-left: 18px; } .ht-list li { margin: 3px 0; } .ht-note { margin-top: 12px; color: var(--muted); } body.lite #dbModal, body.lite #notesModal, body.lite #coachModal, body.lite #saveMyModal { display: none !important; } /* no Practice in lite: server ships examples without a stub, so the practice-first banner never arms; this keeps it hidden defensively. */ body.lite #practiceBar { display: none !important; }