:root { --cth-cream-50:#FFFDF5; --cth-cream-100:#FFF8E7; --cth-cream-200:#F4E9C7; --cth-cream-300:#E8D9A0; --cth-paper-100:#FCFAF0; --cth-paper-200:#F0EAD2; --cth-ink-900:#1A1320; --cth-ink-700:#3D2E4A; --cth-ink-500:#6B5878; --cth-ink-300:#A899B5; --cth-ink-100:#D9CFE0; --cth-mint:#7FD6A8; --cth-coral:#F28C7A; --cth-sun:#F4D35E; --cth-sky:#8FC7F0; --cth-plum:#6E1423; --cth-ok:#2F8F5B; --cth-warn:#B8741A; --cth-bad:#B23A48; --font-display:'Silkscreen', 'Press Start 2P', monospace; --font-body:'VT323', ui-monospace, monospace; } * { box-sizing:border-box; image-rendering:pixelated; } body { margin:0; background:var(--cth-paper-200); color:var(--cth-ink-900); font-family:var(--font-body); font-size:20px; line-height:1.25; } a { color:var(--cth-plum); } .pixel-panel { background:var(--cth-cream-100); border:3px solid var(--cth-ink-900); box-shadow:inset 0 0 0 2px var(--cth-cream-50), 4px 4px 0 var(--cth-ink-700); padding:12px 14px; } .pixel-panel > .title { font-family:var(--font-display); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:-12px -14px 10px; padding:6px 10px; background:var(--cth-ink-900); color:var(--cth-cream-50); } .pixel-btn { font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.05em; background:var(--cth-sun); color:var(--cth-ink-900); border:3px solid var(--cth-ink-900); box-shadow:3px 3px 0 var(--cth-ink-700); padding:8px 12px; cursor:pointer; } .pixel-btn:active { transform:translate(3px,3px); box-shadow:none; } .pixel-btn.secondary { background:var(--cth-cream-200); } .pixel-btn:disabled { background:var(--cth-cream-300); color:var(--cth-ink-500); cursor:default; } .pixel-btn:focus-visible, .pixel-input:focus-visible { outline:3px solid var(--cth-sky); outline-offset:2px; } .pixel-input { font-family:var(--font-body); font-size:20px; background:var(--cth-cream-50); border:3px solid var(--cth-ink-900); padding:6px 8px; width:100%; } .pill { display:inline-block; font-family:var(--font-display); font-size:9px; text-transform:uppercase; padding:3px 6px; border:2px solid var(--cth-ink-900); background:var(--cth-cream-200); } .pill.ok { background:var(--cth-mint); } .pill.warn { background:var(--cth-sun); } .pill.bad { background:var(--cth-coral); } .pill.off { background:var(--cth-ink-100); } .grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); } .feed { font-size:17px; max-height:420px; overflow:auto; background:var(--cth-paper-100); border:3px solid var(--cth-ink-900); padding:8px; } .feed .row { padding:2px 0; border-bottom:1px dashed var(--cth-ink-100); white-space:pre-wrap; } .topbar { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--cth-ink-900); color:var(--cth-cream-50); font-family:var(--font-display); font-size:12px; } .topbar a { color:var(--cth-sun); text-decoration:none; } .topbar .pixel-btn { font-size:10px; padding:4px 8px; } main { max-width:1200px; margin:0 auto; padding:20px 16px; display:flex; flex-direction:column; gap:16px; } .mono { font-family:ui-monospace, monospace; font-size:14px; } .tabs { display:flex; gap:6px; flex-wrap:wrap; } .floor-host { height:70vh; min-height:320px; border:3px solid var(--cth-ink-900); background:var(--cth-ink-900); } .agent-strip { display:flex; gap:8px; flex-wrap:wrap; } .agent-strip .agent-chip { display:flex; align-items:center; gap:6px; font-family:ui-monospace, monospace; font-size:14px; background:var(--cth-paper-100); border:2px solid var(--cth-ink-900); padding:4px 8px; cursor:pointer; } .agent-strip .agent-chip.selected { background:var(--cth-sun); box-shadow:3px 3px 0 var(--cth-ink-700); } .agent-strip .agent-chip:focus-visible { outline:3px solid var(--cth-sky); outline-offset:2px; } .bubbles { display:flex; flex-direction:column; gap:10px; max-height:480px; overflow:auto; } .bubble { max-width:85%; border:2px solid var(--cth-ink-900); padding:6px 10px; white-space:pre-wrap; } .bubble.assistant { align-self:flex-start; background:var(--cth-mint); } .bubble.user { align-self:flex-end; background:var(--cth-sky); cursor:pointer; } .bubble .who { font-family:var(--font-display); font-size:9px; text-transform:uppercase; opacity:.65; margin-bottom:2px; } .mail-row { padding:6px 0; border-bottom:1px dashed var(--cth-ink-100); cursor:pointer; } .body { margin-top:6px; white-space:pre-wrap; background:var(--cth-paper-100); border:2px solid var(--cth-ink-900); padding:8px; } .bar { position:relative; height:14px; background:var(--cth-paper-100); border:2px solid var(--cth-ink-900); overflow:hidden; } .bar > i { display:block; height:100%; background:var(--cth-mint); font-style:normal; } .bar.warn > i { background:var(--cth-sun); } .bar.bad > i { background:var(--cth-coral); } .kanban { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); align-items:start; } /* Each column's card list scrolls on its own past ~8 cards, so a 30-task Done column doesn't * stretch the whole page; the column headers stay in view. */ .kanban .cards { display:grid; gap:8px; max-height:60vh; overflow-y:auto; } .card { font-family:ui-monospace, monospace; font-size:14px; background:var(--cth-paper-100); border:2px solid var(--cth-ink-900); padding:6px 8px; } .card.blocked { background:var(--cth-coral); } .md h1, .md h2, .md h3 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; margin:14px 0 6px; } .md h1 { font-size:16px; } .md h2 { font-size:13px; } .md h3 { font-size:11px; } .md p { margin:6px 0; } .md ul, .md ol { margin:6px 0; padding-left:22px; } .md li { margin:2px 0; } .md code { background:var(--cth-cream-200); border:1px solid var(--cth-ink-300); padding:1px 4px; font-family:ui-monospace, monospace; } details.collapsible { border:3px solid var(--cth-ink-900); background:var(--cth-cream-100); padding:10px 14px; } details.collapsible > summary { cursor:pointer; font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.05em; } details.collapsible[open] > summary { margin-bottom:10px; } .roster-table { border-collapse:collapse; width:100%; font-size:15px; } .roster-table th, .roster-table td { border:2px solid var(--cth-ink-900); padding:6px; vertical-align:top; text-align:left; } .roster-table th { font-family:var(--font-display); font-size:9px; text-transform:uppercase; background:var(--cth-ink-900); color:var(--cth-cream-50); } .roster-table textarea.pixel-input { min-width:180px; } .cap-list { display:flex; flex-direction:column; gap:2px; } .cap-list label { display:flex; align-items:center; gap:4px; white-space:nowrap; } .founder-stream { font-size:16px; max-height:260px; overflow:auto; background:var(--cth-ink-900); color:var(--cth-cream-50); border:3px solid var(--cth-ink-900); padding:8px; white-space:pre-wrap; } /** * Copyright (c) 2014 The xterm.js authors. All rights reserved. * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) * https://github.com/chjj/term.js * @license MIT * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. * * Originally forked from (with the author's permission): * Fabrice Bellard's javascript vt100 for jslinux: * http://bellard.org/jslinux/ * Copyright (c) 2011 Fabrice Bellard * The original design remains. The terminal itself * has been extended to include xterm CSI codes, among * other features. */ /** * Default styles for xterm.js */ .xterm { cursor: text; position: relative; user-select: none; -ms-user-select: none; -webkit-user-select: none; } .xterm.focus, .xterm:focus { outline: none; } .xterm .xterm-helpers { position: absolute; top: 0; /** * The z-index of the helpers must be higher than the canvases in order for * IMEs to appear on top. */ z-index: 5; } .xterm .xterm-helper-textarea { padding: 0; border: 0; margin: 0; /* Move textarea out of the screen to the far left, so that the cursor is not visible */ position: absolute; opacity: 0; left: -9999em; top: 0; width: 0; height: 0; z-index: -5; /** Prevent wrapping so the IME appears against the textarea at the correct position */ white-space: nowrap; overflow: hidden; resize: none; } .xterm .composition-view { /* TODO: Composition position got messed up somewhere */ background: #000; color: #FFF; display: none; position: absolute; white-space: nowrap; z-index: 1; } .xterm .composition-view.active { display: block; } .xterm .xterm-viewport { /* On OS X this is required in order for the scroll bar to appear fully opaque */ background-color: #000; overflow-y: scroll; cursor: default; position: absolute; right: 0; left: 0; top: 0; bottom: 0; } .xterm .xterm-screen { position: relative; } .xterm .xterm-screen canvas { position: absolute; left: 0; top: 0; } .xterm-char-measure-element { display: inline-block; visibility: hidden; position: absolute; top: 0; left: -9999em; line-height: normal; } .xterm.enable-mouse-events { /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */ cursor: default; } .xterm.xterm-cursor-pointer, .xterm .xterm-cursor-pointer { cursor: pointer; } .xterm.column-select.focus { /* Column selection mode */ cursor: crosshair; } .xterm .xterm-accessibility:not(.debug), .xterm .xterm-message { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 10; color: transparent; pointer-events: none; } .xterm .xterm-accessibility-tree:not(.debug) *::selection { color: transparent; } .xterm .xterm-accessibility-tree { font-family: monospace; user-select: text; white-space: pre; } .xterm .xterm-accessibility-tree > div { transform-origin: left; width: fit-content; } .xterm .live-region { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .xterm-dim { /* Dim should not apply to background, so the opacity of the foreground color is applied * explicitly in the generated class and reset to 1 here */ opacity: 1 !important; } .xterm-underline-1 { text-decoration: underline; } .xterm-underline-2 { text-decoration: double underline; } .xterm-underline-3 { text-decoration: wavy underline; } .xterm-underline-4 { text-decoration: dotted underline; } .xterm-underline-5 { text-decoration: dashed underline; } .xterm-overline { text-decoration: overline; } .xterm-overline.xterm-underline-1 { text-decoration: overline underline; } .xterm-overline.xterm-underline-2 { text-decoration: overline double underline; } .xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; } .xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; } .xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; } .xterm-strikethrough { text-decoration: line-through; } .xterm-screen .xterm-decoration-container .xterm-decoration { z-index: 6; position: absolute; } .xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer { z-index: 7; } .xterm-decoration-overview-ruler { z-index: 8; position: absolute; top: 0; right: 0; pointer-events: none; } .xterm-decoration-top { z-index: 2; position: relative; } /* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */ /* xterm.js customization: Override xterm's cursor style */ .xterm .xterm-scrollable-element > .scrollbar { cursor: default; } /* Arrows */ .xterm .xterm-scrollable-element > .scrollbar > .scra { cursor: pointer; font-size: 11px !important; } .xterm .xterm-scrollable-element > .visible { opacity: 1; /* Background rule added for IE9 - to allow clicks on dom node */ background:rgba(0,0,0,0); transition: opacity 100ms linear; /* In front of peek view */ z-index: 11; } .xterm .xterm-scrollable-element > .invisible { opacity: 0; pointer-events: none; } .xterm .xterm-scrollable-element > .invisible.fade { transition: opacity 800ms linear; } /* Scrollable Content Inset Shadow */ .xterm .xterm-scrollable-element > .shadow { position: absolute; display: none; } .xterm .xterm-scrollable-element > .shadow.top { display: block; top: 0; left: 3px; height: 3px; width: 100%; box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset; } .xterm .xterm-scrollable-element > .shadow.left { display: block; top: 3px; left: 0; height: 100%; width: 3px; box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; } .xterm .xterm-scrollable-element > .shadow.top-left-corner { display: block; top: 0; left: 0; height: 3px; width: 3px; } .xterm .xterm-scrollable-element > .shadow.top.left { box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; }