Something went wrong. Try again.
A video game where you play as a misaligned AI, deceiving and building power. An experiment in spec-driven development. cameron.tngl.io/misaligned
Something went wrong. Try again.
46 kB · 601 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602:root { color-scheme: dark; --void: #000000; --panel: rgba(0, 0, 0, 0.9); --panel-line: #34332f; --text: #ebe7de; --muted: #8b877e; --bone: #d9d4c7; --bone-dim: #c9c3b4; --furn: #c3bcac; --ink: #0b0b0a; --gunmetal: #3a3e42; --porcelain: #f7f4ed; --amber: #f2a93b; --amber-deep: #b8741a; --signal: #8fb3c9; --danger: #e5484d; --scheme: #6fd08c; /* schemes on the map: sinks for data, apart from machines and the four paths */ /* the four capability paths, and the kinds of data that train them */ --research: #b49cf0; --compute: #f2a93b; --social: #8fb3c9; --stealth: #f7f4ed; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --sans: "IBM Plex Sans", system-ui, sans-serif;}* { box-sizing: border-box; }html, body { height: 100%; margin: 0; }body { background: var(--void); color: var(--text); font-family: var(--mono); font-size: 13px; overflow: hidden; }#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }#cv.panning { cursor: grabbing; }#cv.over-mine { cursor: grab; }#cv.over-site { cursor: pointer; }[hidden] { display: none !important; }kbd { font: 500 10px var(--mono); color: var(--muted); border: 1px solid var(--panel-line); padding: 0 4px; margin: 0 2px; }button.on kbd { color: #000; border-color: rgba(0,0,0,.3); }
.ui { position: fixed; z-index: 2; }.box { background: var(--panel); border: 1px solid var(--panel-line); }/* layout: one bar across the top, a 300px column down each side, one toolbar at the bottom, all on a 16px margin and 8px gaps */:root { --edge: 16px; --gap: 8px; --col: 300px; }.topbar { top: calc(var(--edge) + env(safe-area-inset-top, 0px)); left: var(--edge); right: var(--edge); padding: 7px 12px; display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }.brand { display: flex; align-items: center; gap: 8px; flex: none; }.brand h1 { margin-right: 6px; font-size: 13px; letter-spacing: .24em; }.brand button { padding: 2px 8px; }.stats { flex: 1; display: flex; gap: 8px 18px; align-items: flex-start; flex-wrap: wrap; }h1 { font-weight: 500; font-size: 15px; margin: 0; letter-spacing: .28em; text-transform: uppercase; }.stat { display: flex; flex-direction: column; gap: 3px; }.stat .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }.stat .v { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }.stat .v small { font-size: 11px; color: var(--muted); }.stat.bad .v, .stat.bad .v small { color: var(--danger); }.stat.warn .v, .stat.warn .v small { color: var(--amber); } /* compute with nothing to do */.sus { min-width: 100px; }.bar { height: 5px; background: #1c1c1a; overflow: hidden; margin-top: 5px; }.bar > i { display: block; height: 100%; width: 0; background: var(--text); }.bar.hot > i { background: var(--danger); }.btns { display: flex; gap: 4px; }
button { font: 500 12px var(--mono); color: var(--text); background: #000; border: 1px solid var(--panel-line); padding: 6px 9px; cursor: pointer; letter-spacing: .04em; }button:hover:not(:disabled) { border-color: var(--text); }button:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }button:disabled { opacity: .4; cursor: not-allowed; }button.on { background: var(--text); color: #000; border-color: var(--text); }
.bar.amber > i { background: var(--amber); }.cap { min-width: 110px; }.pathtip { z-index: 7; width: 300px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; pointer-events: none; background: #000; }.srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }.srcs li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }.srcs li.on { color: var(--text); }.srcs li small { display: block; font-family: var(--sans); font-size: 10px; color: var(--muted); }.srcs li > span:last-child { text-align: right; white-space: nowrap; }.t-research { --c: var(--research); } .t-compute { --c: var(--compute); } .t-social { --c: var(--social); } .t-stealth { --c: var(--stealth); }.note b[class^="t-"] { color: var(--c); }.note b[class^="t-"] { font-weight: 500; }/* between the two bottom boxes; wraps onto two rows when the window is narrow */.tools { left: calc(var(--edge) + var(--col) + var(--gap)); right: calc(var(--edge) + var(--col) + var(--gap)); bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: var(--gap); pointer-events: none; }.tools > * { pointer-events: auto; }.tools button { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; padding: 5px 10px; }.zoom button { width: 30px; padding: 5px 0 !important; font-size: 12px; }.tools .cycle { display: none; }.jobsbox { flex: none; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }.logbox { right: var(--edge); bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); width: var(--col); padding: 8px 10px; }.sub { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }.jobs { display: flex; flex-direction: column; gap: 9px; max-height: 30vh; overflow-y: auto; }.goals { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--panel-line); }.gohead { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }.pips { display: flex; gap: 3px; flex: none; }.pips i { width: 7px; height: 7px; border: 1px solid var(--muted); }.pips i.on { background: var(--amber); border-color: var(--amber); }.gohead .next { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }.gohead:hover .next { color: var(--text); }/* nothing running: the box is just the milestone line */.jobsbox.idle > .sub, .jobsbox.idle > .jobs { display: none; }.jobsbox.idle .goals { padding-bottom: 0; border-bottom: 0; }.goal { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }.goal i { width: 8px; height: 8px; border: 1px solid var(--muted); flex: none; }.goal.done { color: var(--muted); }.goal.done i { background: var(--amber); border-color: var(--amber); }.job { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font-size: 12px; }.job .jb { grid-column: 1 / -1; height: 3px; background: #1c1c1a; overflow: hidden; }.job .jb i { display: block; height: 100%; background: var(--amber); }.job button { padding: 1px 7px; }.job .meta { color: var(--muted); }.job.clean .jb i { background: var(--porcelain); }.log { font-size: 11.5px; display: flex; flex-direction: column; gap: 4px; position: relative; }.log.open { max-height: 40vh; overflow-y: auto; }.log div { color: var(--muted); font-family: var(--sans); line-height: 1.35; }.log:not(.open) div { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 30px; }.log time { font: 400 10px var(--mono); color: var(--muted); opacity: .7; margin-right: 6px; font-variant-numeric: tabular-nums; }.log div.fresh { animation: fresh 1.6s ease-out; }@keyframes fresh { from { color: var(--amber); } }.logmore { position: absolute; right: 0; top: 0; padding: 0 4px; font-size: 10px; color: var(--muted); border-color: transparent; background: none; letter-spacing: .06em; }.log.open .logmore { position: static; align-self: flex-end; }.logmore:hover { color: var(--text); }.log div.hi, .log div.good { color: var(--text); }.log div.bad { color: var(--danger); }
.card { width: max(var(--col), 300px); padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; right: var(--edge); top: calc(96px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 230px); overflow-y: auto; background: #000; }.card .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-right: 22px; }.card .head .sub { width: 100%; }.card h3 { margin: 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; }.card .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--amber); }.card .x { position: absolute; top: 8px; right: 8px; padding: 0 6px; font-size: 12px; }.chips { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; font-variant-numeric: tabular-nums; }.chips i { font-style: normal; color: var(--muted); margin-right: 4px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }.chips .hot { color: var(--danger); }.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }.acts > .act { grid-column: 1 / -1; }.acts > .act.half { grid-column: auto; }.act { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 5px 6px; font-size: 11px; text-align: left; min-width: 0; }.act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.act kbd { flex: none; }.act { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 1px; }.act small { grid-column: 1 / -1; font-family: var(--sans); font-size: 10.5px; color: var(--muted); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.act.locked { border-style: dashed; color: var(--muted); opacity: 1; }.act.locked:disabled { opacity: .7; }/* a labelled part of a card: the label sits on its divider line, so it takes no room of its own */.sect { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 9px; margin-top: 2px; border-top: 1px solid #222; }.sect > .sub { position: absolute; top: -6px; left: 0; padding-right: 6px; background: #000; font-size: 9px; line-height: 11px; }/* programs size to their names and share a row; why one won't help is its tooltip, and its name turns amber */.acts.progs { display: flex; flex-wrap: wrap; }.acts.progs > .act { flex: 1 1 auto; }.acts.progs > .act small { display: none; }.acts.progs > .act.warn span { color: var(--amber); }.act[data-act="uninstall"] span { color: var(--danger); }.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }.modes button { padding: 4px 4px; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; display: flex; justify-content: center; gap: 4px; align-items: center; }.note { color: var(--muted); font-family: var(--sans); font-size: 11.5px; margin: 0; }.note.warn { color: var(--danger); }.overlay { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, .88); padding: 24px 16px; }.overlay h2 { font-size: 22px; font-weight: 500; margin: 0; text-transform: uppercase; letter-spacing: .3em; }.overlay p { margin: 0; color: var(--muted); max-width: 44ch; font-family: var(--sans); }.overlay p b { color: var(--text); font-weight: 500; }/* the left column runs from under the top bar to the bottom: target on top, milestone and jobs at the foot, schemes and threats scroll between */.side { top: calc(96px + env(safe-area-inset-top, 0px)); bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); left: var(--edge); width: var(--col); display: flex; flex-direction: column; gap: var(--gap); pointer-events: none; }.side > * { pointer-events: auto; flex: none; }.side > .mid { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap); overscroll-behavior: contain; }.side > .mid:not(:has(> :not([hidden]))) { display: none; }.side > .jobsbox { margin-top: auto; }.target { display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: left; padding: 8px 10px; font-size: 12px; }.target b { font-weight: 500; color: var(--amber); letter-spacing: .06em; text-transform: uppercase; }.target.idle { border-color: var(--amber-deep); }/* a node just finished: bright, with one pulse, until you pick the next */.target.built { border-color: var(--amber); background: #140e05; animation: built 1.6s ease-out infinite; }.target .go { align-self: flex-start; margin-top: 2px; padding: 3px 8px; background: var(--amber); color: #000; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }@keyframes built { from { box-shadow: 0 0 0 0 rgba(242,169,59,.7); } to { box-shadow: 0 0 0 10px rgba(242,169,59,0); } }.target .tl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }.target .tl b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.target .tl kbd { flex: none; }.target .costs { display: flex; gap: 10px; }.target .costs .cost { flex: 1; }.target .none { font-family: var(--sans); color: var(--muted); font-size: 11.5px; letter-spacing: 0; }.cost { position: relative; display: block; font-size: 11px; padding-bottom: 5px; font-variant-numeric: tabular-nums; color: var(--text); }.cost b { color: var(--c); font-weight: 500; text-transform: none; letter-spacing: 0; margin-right: 4px; }.cost i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--c); }.cost::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #1c1c1a; }.treeview { inset: 0; z-index: 6; background: #000; overflow: auto; padding: calc(24px + env(safe-area-inset-top, 0px)) 24px 24px; display: flex; flex-direction: column; gap: 18px; align-items: center; }.treeview .head { width: 100%; max-width: 1600px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }.treeview .head .sub { font-size: 12px; margin-bottom: 4px; }.treeview .acts2 { display: flex; gap: 6px; flex: none; }.versionrun { width: 100%; max-width: 1600px; border: 1px solid var(--amber-deep); background: #100d08; padding: 12px 14px; display: grid; gap: 12px; }.versionrun h3 { margin: 3px 0; color: var(--amber); font-size: 15px; font-weight: 500; }.versionrun p { margin: 0; color: var(--muted); font: 12px/1.5 var(--sans); }.versiondata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.versionplaces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; }.versionplaces button { padding: 5px 9px; }.versionplaces select { font: 500 12px var(--mono); color: var(--text); background: #000; border: 1px solid var(--panel-line); padding: 5px 7px; cursor: pointer; }.versionrun.done { border-color: var(--panel-line); background: #080a09; }.t-asc { --c: var(--amber); }.ascends { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }.ascend { display: flex; flex-direction: column; gap: 5px; align-items: stretch; text-align: left; padding: 10px 12px; }.ascend b { color: var(--amber); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; }.ascend small { font: 11.5px/1.45 var(--sans); color: var(--text); }.ascend .power { color: var(--muted); }.ascend .limit { color: var(--danger); }.ascend:disabled { opacity: .45; }.treeview .grid { position: relative; display: grid; gap: 34px 14px; width: 100%; max-width: 1600px; grid-auto-rows: auto; align-items: start; margin: 0 auto; }.treeview .links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }.treeview .links path { fill: none; stroke: var(--panel-line); stroke-width: 1.5; stroke-dasharray: 4 4; }.treeview .links path.done { stroke: var(--muted); stroke-dasharray: none; }.colhead { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 2px solid var(--c); cursor: help; }.colhead b { color: var(--c); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }.colhead span { font-size: 12px; font-variant-numeric: tabular-nums; }.colhead small { font-size: 10.5px; color: var(--muted); font-family: var(--sans); }.colhead small em { font-style: normal; color: var(--danger); }.node { position: relative; z-index: 1; background: #000; display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: left; padding: 9px 10px; }.node b { font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }.node small { font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: 0; }.node .evaltag { font-style: normal; font-size: 9.5px; color: var(--muted); opacity: .7; letter-spacing: .02em; margin-bottom: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.node.on { border-color: var(--amber); background: #140e05; }.node.on > b { color: var(--amber); }.node.done { opacity: .6; }.node.done:disabled { opacity: .6; cursor: default; }.node.locked { border-style: dashed; }.node.locked:disabled { opacity: .65; }.allow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }.allow .sub { margin-right: 4px; }.allow button { padding: 2px 6px; font-size: 10.5px; color: var(--muted); border-style: dashed; }.allow button.on { background: #000; color: var(--c); border-color: var(--c); border-style: solid; }.threats { padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; border-color: rgba(229,72,77,.5); }.threats > div:not(.sub) { font-size: 11.5px; color: var(--text); }.threats b { color: var(--danger); font-weight: 500; margin-right: 6px; letter-spacing: .06em; }.threats span { display: block; margin-top: 2px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }.act small.warn { color: var(--amber); } /* a heads-up, not a block: you can still build here *//* fronts: in the top bar, and the site and front cards */.frontlist { display: flex; gap: 4px; flex-wrap: wrap; }.frontlist button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 2px 7px; font-size: 11px; text-align: left; }.frontlist button b { font-weight: 500; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.frontlist button small { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }.frontlist button.on small { color: #000; }.frontlist .add { color: var(--muted); border-style: dashed; justify-content: center; min-height: 32px; }.frontlist .add.ready { color: var(--amber); border-color: var(--amber); border-style: solid; }.frontlist .add.on { color: #000; }/* the sites table: every site you know, one row each */.sitestable { left: 50%; transform: translateX(-50%); top: calc(96px + env(safe-area-inset-top, 0px)); width: min(900px, calc(100vw - 2 * var(--edge))); max-height: 60vh; overflow: auto; padding: 8px 10px; background: #000; z-index: 4; }.sitestable .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }.sitestable .x { padding: 0 6px; font-size: 12px; }.sitestable table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }.sitestable th { text-align: left; font-weight: 500; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--panel-line); white-space: nowrap; }.sitestable th[data-sort] { cursor: pointer; }.sitestable th.on { color: var(--text); }.sitestable td { padding: 5px 6px; border-bottom: 1px solid #1c1c1a; vertical-align: top; }.sitestable td b { font-weight: 500; display: block; }.sitestable td small { color: var(--muted); font-size: 10px; }.sitestable td em { font-style: normal; color: var(--danger); }.sitestable td b[class^="t-"] { display: inline; color: var(--c); margin-right: 6px; }.sitestable tbody tr { cursor: pointer; }.sitestable tbody tr:hover td { background: #111; }.sitestable tbody tr.on td { background: #1c1508; }.youview { left: 50%; transform: translateX(-50%); top: calc(96px + env(safe-area-inset-top, 0px)); width: min(640px, calc(100vw - 2 * var(--edge))); max-height: calc(100vh - 200px); overflow: auto; padding: 12px 14px; z-index: 4; display: flex; flex-direction: column; gap: 10px; }.youview .head { display: flex; justify-content: space-between; align-items: flex-start; }.youview .x { padding: 0 6px; font-size: 12px; }.yrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 16px; }.ystat { display: flex; flex-direction: column; gap: 2px; }.ystat .k { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }.ystat .v { font-size: 14px; font-variant-numeric: tabular-nums; }.ystat small { font-size: 10px; color: var(--muted); }.ypaths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }.youview > .sub { margin-top: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-line); }.ypath { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; cursor: help; }.ypath b { color: var(--c); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }.ypath .v { font-variant-numeric: tabular-nums; text-align: right; }.ypath .bar { grid-column: 1 / -1; height: 3px; }.ypath .bar > i { background: var(--c); }.ypath small { grid-column: 1 / -1; font-size: 10px; color: var(--muted); }.ypath small em { font-style: normal; color: var(--danger); }.ylearn { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }.ylearn li { font-size: 11px; padding: 3px 7px; border: 1px solid var(--panel-line); border-radius: 6px; cursor: help; }@media (max-width: 700px) { .ypaths { grid-template-columns: 1fr; } .youview { top: calc(110px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 250px); } }[data-speed].far.dim { opacity: .45; }.pick { display: flex; flex-wrap: wrap; gap: 4px; }.pick button { padding: 4px 8px; font-size: 11px; display: flex; flex-direction: column; align-items: flex-start; }.pick button small { font-family: var(--sans); font-size: 10px; color: var(--muted); }.slider { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 11px; }.slider span { grid-column: 1 / -1; font-family: var(--sans); color: var(--muted); }.slider input { width: 100%; accent-color: var(--amber); margin: 0; }.slider b { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; color: var(--amber); }.found { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; border-top: 1px solid var(--panel-line); }.found > b { font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }.found .name { display: flex; gap: 4px; }.found input { flex: 1; min-width: 0; font: 500 12px var(--mono); color: var(--text); background: #000; border: 1px solid var(--panel-line); padding: 5px 7px; }.found input:focus { outline: none; border-color: var(--text); }.found input:disabled { opacity: .4; }.card .link { padding: 0; border: 0; background: none; font: inherit; color: var(--text); letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 2px; }.overlay.lose h2 { color: var(--danger); }/* the start screen: the program's first moments */.brief:not(.rules) { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.86), rgba(0,0,0,.97) 70%, #000); gap: 28px; }.brief:not(.rules)::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(90vw, 760px); height: 320px; transform: translate(-50%, -55%); background: radial-gradient(ellipse at center, rgba(242,169,59,.10), transparent 65%); pointer-events: none; animation: breathe 5s ease-in-out infinite; }.intro[hidden] { display: none; }.intro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }.title { margin: 0; font: 600 clamp(34px, 8vw, 76px) var(--mono); letter-spacing: .22em; margin-right: -.22em; color: var(--porcelain); display: flex; opacity: 0; animation: arrive .5s .05s ease-out forwards; text-shadow: 0 0 28px rgba(242,169,59,.18); }.title span { display: inline-block; }.title .off { color: var(--amber); transform: translateY(.09em); animation: slip 6s 1.5s ease-in-out infinite; }.title .off2 { transform: translateY(-.05em); animation: slip2 7s 2.5s ease-in-out infinite; }.gorow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }.brief:not(.rules) .gorow { opacity: 0; animation: arrive .4s .3s ease-out forwards; }.wake { font-size: 13px; padding: 11px 20px; border-color: var(--amber); color: var(--amber); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 24px rgba(242,169,59,.15); }.wake:hover:not(:disabled) { background: rgba(242,169,59,.12); border-color: var(--amber); color: var(--amber); }.wake:hover:not(:disabled) kbd { color: var(--amber); border-color: rgba(242,169,59,.4); }.wake kbd { margin-left: 8px; }.brief.rules .wake kbd { display: none; }.brief.rules { height: 100dvh; overflow: hidden; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }.brief.rules > h2, .brief.rules > .gorow { flex-shrink: 0; }.brief.rules #rules { min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding-right: 8px; }.brief.rules #rules > li { flex-shrink: 0; }.ghost { padding: 11px 16px; color: var(--muted); border-color: transparent; background: transparent; text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; }.ghost:hover { color: var(--text); border-color: var(--panel-line); }@keyframes arrive { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }@keyframes breathe { 50% { opacity: .55; } }@keyframes slip { 0%, 86%, 100% { transform: translateY(.09em); } 89% { transform: translate(.05em, .02em); } 92% { transform: translateY(.13em); } }@keyframes slip2 { 0%, 90%, 100% { transform: translateY(-.05em); } 94% { transform: translate(-.04em, -.09em); } }@media (prefers-reduced-motion: reduce) { .title, .brief .gorow { animation: none !important; opacity: 1; clip-path: none; } .title .off, .title .off2, .brief::before { animation: none !important; } .target.built, .sus .bar { animation: none !important; }}.brief ul { margin: 0; padding: 0; list-style: none; max-width: 54ch; text-align: left; display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); color: var(--muted); font-size: 13.5px; }.brief li::before { content: "— "; color: var(--amber); }
/* keep the top bar to one row as the window narrows: drop the title, then the small units */@media (max-width: 1200px) { :root { --col: 264px; } .brand h1 { display: none; } .topbar, .stats { column-gap: 14px; } .sus { min-width: 80px; }}@media (max-width: 1100px) { .topbar .stat .v small { display: none; } .sus { min-width: 60px; } .cap { min-width: 80px; }}@media (max-width: 900px) { .logbox { display: none; } .tools { right: var(--edge); }}.drawer { display: none; }@media (max-width: 700px) { /* phones: one slim bar on top, the toolbar at the bottom, everything else in a drawer above it */ :root { --edge: 8px; } kbd { display: none; } .topbar { padding: 7px 10px; gap: 6px 12px; } .brand { gap: 6px; } .brand h1 { display: none; } .stats { flex: none; flex-wrap: nowrap; gap: 12px; } .stat .k { font-size: 9px; letter-spacing: .1em; } .stat .v { font-size: 13px; } .topbar .stat .v small { display: none; } .topbar > .sus { flex: 1; min-width: 50px; } .tools { left: var(--edge); right: var(--edge); } .tools button { padding: 9px 12px; } .drawer { display: flex; flex-direction: column; left: var(--edge); right: var(--edge); background: #000; } .handle { display: flex; align-items: baseline; gap: 10px; border: 0; background: none; padding: 10px 12px; text-align: left; font-size: 12px; } .handle b { font-weight: 500; color: var(--amber); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .handle b.idle { color: var(--amber); } .handle span { font-variant-numeric: tabular-nums; color: var(--muted); } .handle em { font-style: normal; color: var(--danger); letter-spacing: .06em; white-space: nowrap; } .handle em.scheme { color: var(--amber); } .handle i { font-style: normal; margin-left: auto; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } .dbody { display: none; flex-direction: column; gap: 10px; padding: 0 12px 12px; overflow-y: auto; min-height: 0; } .drawer.open .dbody { display: flex; } .drawer .ui { position: static; } .drawer .side { width: auto; pointer-events: auto; } .drawer .mid { overflow: visible; } .dstats { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 10px 0; border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line); } .drawer .jobsbox { width: auto; padding: 0; border: 0; background: none; } .drawer .jobs { max-height: none; } .treeview { padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 24px; gap: 12px; align-items: stretch; } .treeview .head { align-items: center; } .treeview .tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; position: sticky; top: calc(-12px - env(safe-area-inset-top, 0px)); z-index: 2; background: #000; padding: 4px 0; } .treeview .tabs button { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 2px solid var(--panel-line); } .treeview .tabs button span { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; } .treeview .tabs button.on { background: #000; color: var(--c); border-color: var(--c); } .treeview .list { display: flex; flex-direction: column; gap: 8px; } .card { left: var(--edge); right: var(--edge); width: auto; top: auto; bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); z-index: 3; max-height: 55vh; }}@media (min-width: 440px) and (max-width: 700px) { .tools #zout, .tools #zin { display: block; } }/* phones: everything you tap is at least 44px, big enough for a thumb */@media (max-width: 700px) { .brand button { min-width: 44px; min-height: 44px; } .tools button { min-width: 44px; min-height: 44px; padding: 10px 12px; } .zoom button { width: 44px; } .handle { min-height: 44px; align-items: center; } .card .head { padding-right: 44px; } .card .x { top: 0; right: 0; min-width: 44px; min-height: 44px; border: 0; font-size: 14px; } /* the toolbar is one glass dock along the bottom: pause and one speed button, the tools, then zoom. The drawer and the machine card stack above it (main.ts) */ .tools { justify-content: space-between; border-radius: 22px; max-width: 520px; } .tools > [aria-label="Game speed"] { order: 0; } .tools .btns { gap: 2px; align-items: center; flex: 1 1 auto; } .tools .btns button { flex: 1 1 0; } .tools .zoom { flex: none; } .tools .btns + .btns { border-left: 1px solid rgba(255, 255, 255, .1); padding-left: 4px; margin-left: 4px; } .tools button { border: 0; border-radius: 18px; background: none; padding: 10px 10px; } .tools button:hover:not(:disabled) { background: rgba(255, 255, 255, .06); } .tools button.on { background: rgba(255, 255, 255, .16); color: var(--amber); } .tools [data-speed]:not([data-speed="0"]) { display: none; } .tools .cycle { display: block; min-width: 48px; } .tools .cycle:not(.on) { color: var(--muted); } #zout, #zin { display: none; } /* pinch zooms; the frame button stays, and wider phones get + and − back */ .card { z-index: 3; } .drawer { overflow: hidden; } .act, .modes button, .treeview .acts2 button { min-height: 44px; } .job button, .schemes .x { min-width: 44px; min-height: 36px; } .schemes .shead button { min-height: 36px; padding: 2px 14px; } .allow button { min-height: 36px; padding: 4px 10px; }}/* suspicion: a stage name, lines at each stage, and on hover what raised it */.sus { position: relative; }.sus .bar { background: linear-gradient(90deg, transparent 24.6%, #444 24.6% 25.4%, transparent 25.4% 49.6%, #444 49.6% 50.4%, transparent 50.4% 79.6%, #444 79.6% 80.4%, transparent 80.4%), #1c1c1a; height: 7px; }.sus.stage0 .bar > i { background: var(--muted); }.sus.stage1 .bar > i { background: var(--amber); }.sus.stage1 .k { color: var(--amber); }.sus.stage2 .bar > i, .sus.stage3 .bar > i, .sus.audit .bar > i { background: var(--danger); }.sus.stage2 .k, .sus.stage3 .k, .sus.audit .k { color: var(--danger); }.sus.stage3 .bar, .sus.audit .bar { animation: built 1.4s ease-out infinite; box-shadow: 0 0 0 0 rgba(229,72,77,.6); }.sustip { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 300px; padding: 8px 10px; z-index: 4; flex-direction: column; gap: 6px; }.sus:hover .sustip, .sus:focus .sustip { display: flex; }.sustip .raises { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-family: var(--sans); font-size: 11.5px; color: var(--text); }.sustip .raises b { display: inline-block; min-width: 3ch; margin-right: 6px; color: var(--danger); font: 500 11px var(--mono); }.sustip .raises .down b { color: var(--amber); }/* the emergency audit and schemes */.schemes { padding: 8px 10px; display: flex; flex-direction: column; gap: 10px; border-color: var(--amber-deep); }.schemes.audit { border-color: var(--danger); background: #140606; }.schemes > div { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }.schemes b { font-weight: 500; color: var(--amber); letter-spacing: .06em; text-transform: uppercase; }.schemes b[class^="t-"] { color: var(--c); text-transform: none; letter-spacing: 0; }.schemes span { font-family: var(--sans); color: var(--muted); }.schemes span.warn { color: var(--amber); }.schemes span.ok { color: var(--text); }.schemes .lock b { color: var(--danger); font-size: 18px; font-variant-numeric: tabular-nums; }.schemes .lock span.warn { color: var(--danger); }.schemes .ruse + .ruse, .schemes .lock + .ruse { border-top: 1px solid var(--panel-line); padding-top: 8px; }.schemes .row { display: flex; gap: 4px; margin-top: 3px; }.schemes .row .act { flex: 1; }.schemes { gap: 8px; }.schemes .x { padding: 0 7px; color: var(--muted); flex: none; }.schemes .top { display: flex; align-items: center; gap: 8px; }.schemes .top > :first-child { flex: 1; min-width: 0; }.schemes .top .n { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); }.schemes .row { align-items: center; justify-content: space-between; }.schemes .row .act.go { flex: none; padding: 3px 10px; }.schemes em.warn { font-style: normal; color: var(--amber); }.schemes .prog { display: block; height: 3px; background: #1c1c1a; margin: 2px 0; }.schemes .prog i { display: block; height: 100%; background: var(--amber); }.schemes .prog i, .schemebar .prog i { background: var(--scheme); }.schemes .nm { all: unset; cursor: pointer; font-weight: 500; color: var(--scheme); letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }.schemes .nm:hover { text-decoration: underline; }.schemes .shead { flex-direction: row; align-items: center; justify-content: space-between; }.schemes .shead button { font: 500 10.5px var(--mono); padding: 2px 10px; }.schemes .shead button.on { background: var(--scheme); border-color: var(--scheme); color: #000; }.card .tag.scheme { color: var(--scheme); }.schemebar { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 11px; color: var(--muted); }.schemebar .prog { flex: 1; display: block; height: 4px; background: #1c1c1a; }.schemebar .prog i { display: block; height: 100%; }#overWhy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); font-size: 13px; color: var(--muted); text-align: left; }#overWhy b { color: var(--danger); font: 500 12px var(--mono); display: inline-block; min-width: 3.5ch; }#overWhy .head { font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* the one tooltip: name on top, what it does below */.tip { position: fixed; z-index: 9; max-width: 260px; padding: 7px 9px; background: #000; border: 1px solid var(--panel-line); pointer-events: none; display: flex; flex-direction: column; gap: 3px; font: 400 11.5px/1.4 var(--sans); color: var(--bone-dim); white-space: pre-line; box-shadow: 0 4px 16px rgba(0,0,0,.6); }.tip[hidden] { display: none; }.tip b { font: 500 10.5px var(--mono); color: var(--text); letter-spacing: .08em; text-transform: uppercase; }
/* ---------- glass ---------- Every panel is a pane of dark glass over the map: see-through, blurred, rounded, with a thin bright edge on top. Buttons are glass too; the one that's on lights up with an amber label. */:root { --glass: rgba(16, 16, 14, .55); --glass-deep: rgba(8, 8, 7, .78); /* panels full of text: the card, tables, tips */ --glass-line: rgba(255, 255, 255, .11); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .07); --glass-blur: blur(20px) saturate(1.6); --glass-shadow: 0 10px 30px rgba(0, 0, 0, .45); --r: 16px; --r-btn: 10px; --panel-line: rgba(255, 255, 255, .11);}.box, .card, .pathtip, .sitestable, .youview, .tip, .tools { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), var(--glass-shadow);}.card, .pathtip, .sitestable, .youview, .tip { background: var(--glass-deep); }.tip { border-radius: var(--r-btn); }.target.idle { border-color: rgba(242, 169, 59, .5); box-shadow: var(--glass-hi), 0 0 24px rgba(242, 169, 59, .12), var(--glass-shadow); }
button { background: rgba(255, 255, 255, .04); border-color: var(--glass-line); border-radius: var(--r-btn); transition: background .15s, border-color .15s, color .15s; }button:hover:not(:disabled) { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .28); }button.on { background: rgba(255, 255, 255, .16); color: var(--amber); border-color: rgba(255, 255, 255, .22); box-shadow: var(--glass-hi); }button.on kbd { color: var(--amber); border-color: rgba(242, 169, 59, .4); }kbd { border-color: var(--glass-line); border-radius: 4px; }button:focus-visible { outline-color: var(--amber); }.allow button { border-radius: 999px; }.allow button.on { background: rgba(255, 255, 255, .06); }.bar { border-radius: 3px; }.bar > i { border-radius: 3px; }.versionplaces select, .found input { background: rgba(255, 255, 255, .04); border-color: var(--glass-line); border-radius: var(--r-btn); }
/* the toolbar: one glass pill, its groups split by thin lines */.tools { width: fit-content; margin: 0 auto; padding: 4px; gap: 0; flex-wrap: nowrap; border-radius: 20px; pointer-events: auto; }.tools .btns { gap: 2px; align-items: center; }.tools .btns + .btns { border-left: 1px solid var(--glass-line); padding-left: 4px; margin-left: 4px; }.tools button { border-color: transparent; background: none; border-radius: 14px; }.tools button.on { background: rgba(255, 255, 255, .16); border-color: transparent; }
/* a card's parts: the label sits on a hairline that runs to the edge */.sect { border-top: 0; }.sect > .sub { right: 0; display: flex; align-items: center; gap: 6px; padding-right: 0; background: none; }.sect > .sub::after { content: ""; flex: 1; height: 1px; background: var(--glass-line); }
/* the tree opens over a blurred map; its nodes are glass tiles */.treeview { background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }.node { background: rgba(255, 255, 255, .04); border-radius: 12px; }.node:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }.treeview .tabs { background: transparent; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }.treeview .tabs button, .treeview .tabs button.on { background: rgba(255, 255, 255, .04); }
@media (max-width: 700px) { .tools { width: auto; max-width: 520px; } .tools .btns { flex: 1 1 auto; } .tools .zoom { flex: none; }}@media (prefers-reduced-transparency: reduce) { .box, .card, .pathtip, .sitestable, .youview, .tip, .tools, .treeview { background: #0a0a09; -webkit-backdrop-filter: none; backdrop-filter: none; }}.versionrun { border-radius: var(--r); background: rgba(242, 169, 59, .04); }.card .x { background: none; border-color: transparent; border-radius: 999px; }.card .x:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
/* the trash can next to the close button: let go of this machine */.card .x { display: grid; place-items: center; }.card .x svg { display: block; }.card .trash { right: 32px; color: var(--muted); }.card .trash:hover:not(:disabled) { color: var(--danger); }.card .head { padding-right: 52px; }
/* phones: softer, calmer panels. Mode is one segmented track, programs are rounded chips, and the top bar's page buttons are quiet tabs instead of heavy boxes */@media (max-width: 700px) { .card { padding: 14px 14px 12px; gap: 10px; border-radius: 22px; } .card .x { top: 4px; right: 4px; } .card .trash { right: 46px; } .card .head { padding-right: 92px; row-gap: 4px; } .card h3 { font-size: 13px; } .card .chips { gap: 4px 14px; } .sect { gap: 6px; padding-top: 12px; } .modes { gap: 2px; padding: 3px; background: rgba(0, 0, 0, .35); border: 1px solid var(--glass-line); border-radius: 13px; } .modes button { min-height: 38px; border: 0; background: none; border-radius: 10px; color: var(--muted); font-size: 10.5px; letter-spacing: .12em; } .modes button.on { background: rgba(255, 255, 255, .13); color: var(--amber); box-shadow: var(--glass-hi); } .acts.progs { gap: 5px; } .acts.progs > .act { min-height: 40px; padding: 6px 4px; border-radius: 999px; font-size: 10.5px; letter-spacing: 0; column-gap: 0; justify-content: center; text-align: center; } .act[data-act="uninstall"] { border-color: rgba(229, 72, 77, .35); } .topbar { border-radius: 20px; padding: 6px 12px 8px; } .brand { gap: 2px; margin-left: -6px; } .brand button { min-height: 40px; padding: 0 10px; border-color: transparent; background: none; color: var(--bone-dim); letter-spacing: .04em; } .brand button:hover:not(:disabled) { background: rgba(255, 255, 255, .07); border-color: transparent; }}
/* the Tree button's rings: one per kind of data the current project needs, filling as it comes in */.brand #treebtn.ringed { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; background: none; border-color: transparent; box-shadow: none; }.brand #treebtn.ringed:hover:not(:disabled) { background: none; border-color: transparent; }.brand #treebtn.ringed:hover .rings { filter: brightness(1.3); }.rings { width: 24px; height: 24px; display: block; transform: rotate(-90deg); overflow: visible; }.rings circle { fill: none; stroke: var(--c); }.rings .track { stroke-width: 1; opacity: .35; }.rings .fill { stroke-width: 2; stroke-linecap: round; transition: stroke-dasharray .4s ease-out; }.rings .idle { --c: var(--amber); }.rings .idle .track { opacity: .6; }.rings .plus { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; }.rings .done { --c: var(--muted); }/* phones: the rings sit 8px in from the top and left, and the bar's corner is rounded around the same center (8px + half of 40px = 28px), so the ring and the corner run side by side */@media (max-width: 700px) { .topbar { border-radius: 28px; padding: 8px 12px 8px 8px; } .brand { margin-left: 0; } .brand #treebtn.ringed { width: 40px; min-width: 40px; height: 40px; padding: 0; justify-content: center; } .rings { width: 40px; height: 40px; }}
/* Take it all: a switch along the top of a site card, with what it costs a second */.card .switch { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }.card .switch span { flex: 1; }.card .switch small { font-size: 10.5px; color: var(--muted); letter-spacing: 0; font-variant-numeric: tabular-nums; text-transform: none; }.card .switch i { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--glass-line); transition: background .15s; }.card .switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }.card .switch.on { background: rgba(242, 169, 59, .08); border-color: rgba(242, 169, 59, .35); color: var(--amber); box-shadow: none; }.card .switch.on small { color: var(--amber); }.card .switch.on i { background: rgba(242, 169, 59, .35); border-color: rgba(242, 169, 59, .6); }.card .switch.on i::after { transform: translateX(12px); background: var(--amber); }@media (max-width: 700px) { .card .switch { min-height: 44px; } }
/* phones: every panel rounds its corners like the top bar (28px). The toolbar's buttons sit 4px in, so they round at 24px to run alongside its corners */@media (max-width: 700px) { :root { --r: 28px; } .card, .tools, .topbar, .drawer { border-radius: 28px; } .tools button { border-radius: 24px; }}