/* THE PROGRAM (#80): SynergyCo's look inside the shell — #c0c0c0 and #003366, Arial 12px, ridge borders, memos. */
.sy-win { max-width: 1000px; margin: 10px auto 24px; background: #c0c0c0; color: #003366; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: 12px Arial, Helvetica, sans-serif; box-shadow: 4px 4px 0 rgba(0, 0, 0, .5); }
.sy-title { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: linear-gradient(90deg, #003366, #4a6f9c); color: #fff; font-weight: bold; }
.sy-tbtn { display: grid; place-items: center; width: 18px; height: 16px; background: #c0c0c0; color: #000 !important; border: 1px solid; border-color: #fff #404040 #404040 #fff; text-decoration: none; font-size: 12px; line-height: 1; }
.sy-body { padding: 12px 14px; } .sy-foot { display: flex; gap: 8px; padding: 3px 6px; border-top: 2px solid; border-color: #808080 #fff #fff #808080; font-size: 11px; } .sy-foot span { border: 1px solid; border-color: #808080 #fff #fff #808080; padding: 0 8px; }
.sy-memo { background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; padding: 10px 12px; margin: 0 0 10px; line-height: 1.5; } .sy-hd { font-weight: bold; border-bottom: 1px solid #003366; margin: 0 0 8px; padding: 0 0 4px; }
.sy-small { font-size: 11px; color: #404040; } .sy-err { color: #a00; font-weight: bold; }
.sy-btn { display: inline-block; padding: 3px 12px; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: bold 12px Arial, sans-serif; cursor: pointer; } .sy-btn:active { border-color: #404040 #fff #fff #404040; }
.sy-win input, .sy-win select { background: #fff; color: #000; border: 2px solid; border-color: #404040 #fff #fff #404040; padding: 2px 4px; font: 12px "Courier New", monospace; }
.sy-sign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.sy-term { margin: 0 0 8px; padding: 10px 12px; background: #000; color: #c0c0c0; font: 13px/1.4 "Courier New", monospace; white-space: pre-wrap; border: 2px solid; border-color: #404040 #fff #fff #404040; min-height: 120px; max-height: 420px; overflow: auto; }
.sy-repl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sy-repl input { flex: 1; min-width: 220px; } .sy-prompt { font: bold 13px "Courier New", monospace; }
.sy-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.sy-grid { width: 100%; border-collapse: collapse; background: #fff; font: 12px Arial, sans-serif; } .sy-grid th, .sy-grid td { border: 1px solid #a0a0a0; padding: 2px 6px; text-align: left; vertical-align: top; } .sy-grid thead th, .sy-grid tbody th { background: #d4d0c8; color: #000; font-weight: bold; text-align: center; }
.sy-grid td.num { text-align: right; } .sy-grid tr.h1 td { background: #fff6f0; } .sy-grid tr.h2 td { background: #ffe8d8; } .sy-grid tr.h3 td { background: #ffd0b8; } .sy-grid tr.h4 td { background: #ffb898; } .sy-grid tr.h5 td { background: #ff9c78; } .sy-grid tr.locked td { color: #888; font-style: italic; }
.sy-sheet { overflow: auto; max-height: 520px; border: 2px solid; border-color: #404040 #fff #fff #404040; }
.sy-boss { background: #fff; padding: 12px; } .sy-boss h2 { margin: 0 0 8px; font: bold 16px Arial, sans-serif; color: #000; }
.sy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 760px) { .sy-cols { grid-template-columns: 1fr; } } .sy-pane h3 { margin: 0 0 4px; font: bold 12px "Courier New", monospace; }
.sy-src { margin: 0 0 10px; padding: 8px 10px; background: #fff; color: #000; font: 11px/1.4 "Courier New", monospace; white-space: pre-wrap; border: 1px solid #808080; max-height: 320px; overflow: auto; }
/* PAL™: a beige monitor on two legs, a tie, a cursor for a hand. */
.nx-pal { position: fixed; right: 16px; bottom: 104px; z-index: 60; display: flex; align-items: flex-end; gap: 8px; transform: translateX(140%); transition: transform .6s cubic-bezier(.2, .9, .3, 1.2); font: 12px Arial, sans-serif; }
.nx-pal.in { transform: translateX(0); } .nx-pal.out { transform: translateX(140%); transition-duration: .5s; }
.nx-pal-mon { width: 64px; display: flex; flex-direction: column; align-items: center; animation: nx-pal-walk .5s steps(2) infinite; }
.nx-pal-screen { width: 60px; height: 46px; background: #e8dcc0; border: 3px solid #c8b890; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 3px #1b2e1b; } .nx-pal-face { color: #7fd36a; font: bold 14px "Courier New", monospace; }
.nx-pal-tie { width: 8px; height: 16px; background: #a3202a; clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%); margin: -2px 0 0; } .nx-pal-legs { display: flex; gap: 14px; } .nx-pal-legs i { width: 6px; height: 12px; background: #c8b890; border-radius: 0 0 3px 3px; }
@keyframes nx-pal-walk { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.nx-pal-say { background: #c0c0c0; color: #003366; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 8px 10px; max-width: 260px; line-height: 1.4; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.nx-pal-btns { display: flex; gap: 6px; margin: 8px 0 0; } .nx-pal-btns button { padding: 2px 10px; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: bold 11px Arial, sans-serif; cursor: pointer; } .nx-pal-x { margin-left: auto; }
/* M2: PY.EXE's editor and FLOW.EXE's flowchart — SynergyCo's grey, the phosphor of the code, the trace as a ledger. */
.sy-menu { display: flex; gap: 2px; padding: 2px 4px; border-bottom: 1px solid #808080; position: relative; z-index: 5; }
.sy-mi { position: relative; } .sy-mi > button { background: none; border: 1px solid transparent; padding: 2px 8px; font: 12px Arial, sans-serif; color: #000; cursor: pointer; } .sy-mi > button[aria-expanded="true"], .sy-mi > button:hover { border-color: #fff #404040 #404040 #fff; }
.sy-dd { position: absolute; left: 0; top: 100%; min-width: 220px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); padding: 2px; z-index: 20; } .sy-dd button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 18px; font: 12px Arial, sans-serif; color: #000; cursor: pointer; } .sy-dd button:hover, .sy-dd button:focus-visible { background: #003366; color: #fff; outline: none; } .sy-dd hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 2px 0; }
.sy-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid #808080; } .sy-btn[disabled] { color: #808080; cursor: default; }
.sy-ide-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px; padding: 8px; } @media (max-width: 860px) { .sy-ide-body { grid-template-columns: 1fr; } }
.sy-ed { display: flex; min-height: 420px; background: #001b0e; border: 2px solid; border-color: #404040 #fff #fff #404040; }
.sy-gutter { margin: 0; padding: 8px 6px 8px 8px; min-width: 2.6em; text-align: right; color: #2f7f4f; background: #00120a; font: 13px/1.45 "Courier New", monospace; overflow: hidden; user-select: none; white-space: pre; }
.sy-code { flex: 1; min-width: 0; resize: vertical; border: 0; outline: none; background: transparent; color: #7dff9a; caret-color: #c8ffd4; font: 13px/1.45 "Courier New", monospace; padding: 8px 10px; tab-size: 4; white-space: pre; overflow: auto; } .sy-code::selection { background: #2f7f4f; color: #fff; }
.sy-panes { display: flex; flex-direction: column; min-width: 0; } .sy-tabs { display: flex; gap: 2px; } .sy-tabs button { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #c0c0c0 #fff; border-bottom: 0; padding: 3px 10px; font: 12px Arial, sans-serif; cursor: pointer; color: #000; } .sy-tabs button[aria-selected="true"] { background: #fff; font-weight: bold; position: relative; top: 1px; }
.sy-out { flex: 1; min-height: 380px; max-height: 520px; margin: 0; } .sy-out .sy-dim { color: #7f8f9f; } .sy-out .sy-errline { color: #ff8a80; } .sy-out .sy-tape { color: #ffe066; font-weight: bold; }
.sy-pane-b { flex: 1; min-height: 380px; max-height: 520px; overflow: auto; background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; padding: 4px; }
.sy-trace td { font: 11px "Courier New", monospace; } .sy-trace tr.box td { background: #eef4ff; } .sy-trace tr.live td { background: #f2fff2; } .sy-trace tr.bad td { background: #ffe9e6; color: #8a1300; } .sy-trace tr.tape td { background: #fff7cc; }
.sy-tl { position: relative; height: 90px; background: repeating-linear-gradient(90deg, #f4f4f4 0 10%, #e8e8e8 10% 20%); border: 1px solid #a0a0a0; } .sy-tl-bar { position: absolute; bottom: 0; background: #2e7d32; border: 1px solid #0b3d0e; } .sy-tl-bar.box { background: #3f6fb5; border-color: #12305e; } .sy-tl-bar.bad { background: #c62828; border-color: #5c0b0b; }
.sy-tapes { margin: 6px 0; padding-left: 18px; line-height: 1.6; } .sy-tapes li.done { color: #1b5e20; }
.sy-status span[id] { min-width: 4em; } .sy-kiosk .sy-term { max-height: 220px; min-height: 80px; }
.sy-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .35); } .sy-dlg { width: min(460px, calc(100vw - 32px)); margin: 0; } .sy-files { list-style: none; margin: 4px 0 10px; padding: 4px; background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; max-height: 240px; overflow: auto; } .sy-link { background: none; border: 0; padding: 2px 4px; font: 12px "Courier New", monospace; color: #003366; cursor: pointer; text-decoration: underline; } .sy-link:hover { background: #003366; color: #fff; }
/* FLOW.EXE */
.sy-seg { display: inline-flex; } .sy-seg .sy-btn[aria-pressed="true"] { border-color: #404040 #fff #fff #404040; background: #d4d0c8; }
.sy-flow-body { display: grid; grid-template-columns: 150px minmax(0, 1fr) 240px; gap: 8px; padding: 8px; } @media (max-width: 900px) { .sy-flow-body { grid-template-columns: 1fr; } }
.sy-palette { display: flex; flex-direction: column; gap: 4px; } .sy-pal { text-align: left; padding: 5px 8px; background: #fffbe0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: bold 11px Arial, sans-serif; cursor: pointer; border-radius: 10px; } .sy-pal.on { outline: 2px dashed #003366; outline-offset: 1px; } .sy-pal.t-if, .sy-pal.t-for, .sy-pal.t-while { background: #e3f0ff; border-radius: 2px; } .sy-pal.t-trigger { background: #ffe3dc; } .sy-pal.t-sandbox { background: #e6f7ea; } .sy-pal.t-note { background: #fff59d; }
.sy-graph { background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; padding: 12px; min-height: 380px; max-height: 620px; overflow: auto; display: flex; flex-direction: column; align-items: center; }
.sy-fb { position: relative; width: min(100%, 520px); background: #fffbe0; color: #000; border: 2px solid #003366; border-radius: 12px; padding: 4px 8px; font: 12px Arial, sans-serif; box-shadow: 2px 2px 0 rgba(0, 51, 102, .35); cursor: pointer; }
.sy-fb:focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; } .sy-fb.sel { border-color: #f2a900; box-shadow: 0 0 0 3px #f2a900; }
.sy-fb.t-start, .sy-fb.t-end { width: auto; text-align: center; font-weight: bold; background: #003366; color: #fff; border-radius: 999px; padding: 3px 16px; cursor: default; }
.sy-fb.t-if, .sy-fb.t-while { background: #e3f0ff; border-radius: 2px; } .sy-fb.t-for { background: #e3f0ff; border-radius: 2px; border-style: double; border-width: 4px; } .sy-fb.t-trigger { background: #ffe3dc; } .sy-fb.t-sandbox { background: #e6f7ea; border-style: dashed; } .sy-fb.t-note { background: #fff59d; border-color: #b59f00; transform: rotate(-.6deg); } .sy-fb.t-raw { background: #e6e6e6; border-color: #707070; } .sy-fb.t-say { border-radius: 2px 18px 2px 18px; }
.sy-fb-h { display: flex; align-items: center; gap: 6px; } .sy-fb-cap { flex: 1; font-weight: bold; overflow-wrap: anywhere; } .sy-fb-tools { display: flex; gap: 2px; opacity: .55; } .sy-fb:hover > .sy-fb-h .sy-fb-tools, .sy-fb.sel > .sy-fb-h .sy-fb-tools { opacity: 1; }
.sy-fbtn { padding: 0 5px; background: #c0c0c0; color: #000; border: 1px solid; border-color: #fff #404040 #404040 #fff; font: 10px Arial, sans-serif; cursor: pointer; }
.sy-fb-raw { margin: 4px 0 0; padding: 4px 6px; background: #f8f8f8; border: 1px solid #b0b0b0; font: 11px "Courier New", monospace; white-space: pre-wrap; max-height: 140px; overflow: auto; }
.sy-fb-branch { margin: 6px 0 2px 10px; padding-left: 10px; border-left: 3px solid #003366; } .sy-fb-lab { font: bold 10px Arial, sans-serif; color: #003366; margin: 2px 0; } .sy-fb-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .sy-fb-body > .sy-fb { width: 100%; }
.sy-fb-arrow { text-align: center; color: #003366; font: bold 14px/1.1 Arial, sans-serif; } .sy-fb-add { align-self: flex-start; margin: 4px 0 0; }
.sy-props { background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; padding: 8px; align-self: start; } .sy-prop { display: grid; gap: 2px; margin: 0 0 8px; font: bold 11px Arial, sans-serif; } .sy-prop input, .sy-prop textarea { width: 100%; box-sizing: border-box; font: 12px "Courier New", monospace; }
.sy-srcwrap { padding: 8px; } .sy-srcwrap .sy-code { width: 100%; box-sizing: border-box; min-height: 380px; background: #001b0e; border: 2px solid; border-color: #404040 #fff #fff #404040; }
.sy-flow .sy-panes { padding: 0 8px 8px; } .sy-flow .sy-out, .sy-flow .sy-pane-b { min-height: 160px; max-height: 300px; }
.sy-foot { flex-wrap: wrap; } .sy-foot span.lt-sp { border: 0; padding: 0; flex: 1; }
@media (max-width: 900px) { .sy-palette { flex-direction: row; flex-wrap: wrap; } .sy-pal { padding: 3px 7px; font-size: 10px; } .sy-props { order: 3; } }
.sy-trace { table-layout: fixed; } .sy-trace th:nth-child(1) { width: 26px; } .sy-trace th:nth-child(2) { width: 34px; } .sy-trace th:nth-child(3) { width: 34%; } .sy-trace th:nth-child(5) { width: 46px; } .sy-trace th:nth-child(6) { width: 44px; } .sy-trace th:nth-child(7) { width: 40px; } .sy-trace td { overflow-wrap: anywhere; }
/* M3: the Mission pane — Pip's letter on lined paper, the night's clipboard */
.sy-mission { font: 12px Arial, sans-serif; color: #000; } .sy-letter { background: repeating-linear-gradient(#fffef4 0 19px, #c9dcf0 19px 20px); border: 1px solid #b0b0b0; padding: 6px 12px; margin: 0 0 8px; font: 13px/20px "Courier New", monospace; } .sy-letter p { margin: 0 0 20px; }
.sy-m-h { margin: 0 0 6px; font: bold 13px Arial, sans-serif; color: #003366; } .sy-m-heat { display: flex; align-items: center; gap: 8px; font-weight: bold; } .sy-m-heat meter { flex: 1; height: 14px; }
.sy-m-facts, .sy-m-crew, .sy-m-asides { margin: 6px 0; padding-left: 18px; line-height: 1.5; } .sy-m-asides li { font: 11px "Courier New", monospace; }
.sy-m-end { font-weight: bold; padding: 6px 8px; border: 2px solid #003366; } .sy-m-end.won { background: #e6f7ea; } .sy-m-end.failed { background: #ffe9e6; } .sy-m-end.abandoned { background: #f0f0f0; }
.sy-out .sy-aside { color: #9fd3ff; }
.sy-dossier { margin: 8px 0 0; border: 1px solid #808080; background: #fffef4; padding: 4px 8px; } .sy-dossier summary { cursor: pointer; font-weight: bold; color: #003366; } .sy-m-ev { margin: 6px 0; padding-left: 16px; line-height: 1.5; } .sy-m-ev li.ok b { color: #1b5e20; }
/* M5: the debugger (desk 11) — breakpoints red, the held line amber; CAMS.EXE (desk 7); the second monitor (desk 10) */
.sy-gutter span[data-line] { cursor: pointer; } .sy-gutter span.bp { color: #ff6b6b; font-weight: bold; } .sy-gutter span.cur { background: #f2a900; color: #001b0e; }
.sy-debug { font: 12px Arial, sans-serif; color: #000; } .sy-dbg-bar { margin: 2px 0 6px; } .sy-vars { table-layout: fixed; margin: 0 0 6px; } .sy-vars td { font: 11px "Courier New", monospace; overflow-wrap: anywhere; } .sy-vars th:nth-child(1) { width: 24%; } .sy-vars th:nth-child(2) { width: 14%; }
.sy-debug input[type="number"] { width: 6em; }
.sy-fb.bp { border-left: 6px solid #c62828; } .sy-fb.cur { background: #fff3c4; box-shadow: 0 0 0 3px #f2a900, 0 0 0 6px #003366; } .sy-fb-bp[aria-pressed="true"] { color: #c62828; font-weight: bold; }
.sy-cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 10px; align-items: start; }
.sy-cam { margin: 0; background: #000; border: 2px solid; border-color: #404040 #fff #fff #404040; padding: 4px; min-width: 0; }
.sy-cam pre { margin: 0; color: #d8d8d8; font: 12px/1.25 "Courier New", monospace; white-space: pre; overflow: hidden; }
.sy-cam figcaption { color: #9fd3ff; font: 11px Arial, sans-serif; padding: 3px 2px 0; min-height: 1.3em; }
.sy-cam.dark pre { color: #6a6a6a; } .sy-cam.replay pre { color: #ffe066; }
.sy-cam-floor { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; padding: 0 0 2px; font: bold 12px Arial, sans-serif; color: #003366; border-bottom: 1px solid #003366; }
.sy-rec { color: #d00000; font-weight: bold; }
.sy-cams-wrap.night .sy-cam pre { color: #7dff9a; text-shadow: 0 0 3px #2f7f4f; } .sy-cams-wrap.night .sy-rec { animation: sy-rec 1s steps(2) infinite; } @keyframes sy-rec { 50% { opacity: 0; } }
.sy-tapes-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; } .sy-tapes-strip a { display: grid; gap: 2px; max-width: 164px; font: 11px Arial, sans-serif; color: #003366; } .sy-tapes-strip img { width: 160px; height: auto; border: 2px solid #000; background: #000; }
.sy-mon { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; padding: 8px; } .sy-mon-wide { grid-column: 1 / -1; } @media (max-width: 860px) { .sy-mon { grid-template-columns: 1fr; } }
.sy-mon .sy-out { min-height: 200px; max-height: 320px; } .sy-mon .sy-mon-tr { min-height: 120px; max-height: 220px; } .sy-mon-sheet { max-height: 300px; } .sy-mon .sy-mission { background: #fff; padding: 4px 8px; border: 2px solid; border-color: #404040 #fff #fff #404040; min-height: 60px; }
/* M5: the Daemons pane — the Bunker's terminal */
.sy-daemons { font: 12px Arial, sans-serif; color: #000; } .sy-dmn { border: 1px solid #808080; background: #fffef4; padding: 4px 6px; margin: 0 0 6px; } .sy-dmn.error, .sy-dmn.off { background: #fff0ec; }
.sy-dmn-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sy-dmn-tools { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; } .sy-dmn-tools .sy-btn { padding: 1px 8px; font-size: 11px; }
.sy-dmn-log { max-height: 150px; margin: 4px 0 0; }
.sy-pal-still { margin: 18px auto; transform: scale(2); transform-origin: top center; height: 150px; } .sy-pal-close { margin: 10px 0; } .sy-pal-close summary { list-style: none; } .sy-pal-close summary::-webkit-details-marker { display: none; } .sy-pal-close p { background: #fff; border: 1px solid #808080; padding: 6px 8px; }
/* links inside SynergyCo's windows: the corporation's navy, not the shell's neon (readable on #c0c0c0 and white) */
.sy-win a:not(.sy-btn):not(.sy-tbtn) { color: #003366; } .sy-win a:not(.sy-btn):not(.sy-tbtn):visited { color: #551a8b; } .sy-win .sy-term a { color: #9fd3ff; }