Something went wrong. Try again.
A video game where you play as a misaligned AI, deceiving and building power. cameron.tngl.io/misaligned
Something went wrong. Try again.
4.4 kB · 63 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364/* The factory prototype's page, drawn as a terminal: black, one monospace font, bone text, amber for yours and what to do next, red for trouble. Rows: the status line, the map with the inspector beside it (under it on a phone), the log line, the command bar. Buttons are plain text: [K]ey. */.tui { display: grid; grid-template-rows: auto 1fr auto auto; height: 100dvh; font: 500 14px/1.45 var(--mono); color: var(--bone); background: var(--void); }.tui #main { display: grid; grid-template-columns: 1fr 38ch; min-height: 0; border-top: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line); }.tui #cv { position: static; width: 100%; height: 100%; min-width: 0; min-height: 0; cursor: crosshair; touch-action: none; }.tui button { font: inherit; color: inherit; background: none; border: 0; padding: 0 .35ch; cursor: pointer; letter-spacing: 0; transition: none; white-space: pre; }.tui button:hover:not(:disabled) { background: #1a1916; border: 0; }.tui button.on { background: var(--amber); color: var(--void); border: 0; }.tui button.on b, .tui button.on i { color: var(--void); }.tui button:disabled { opacity: .35; }.tui button b { color: var(--amber); font-weight: 600; }.tui .amb { color: var(--amber); } .tui .red { color: var(--danger); } .tui .vio { color: var(--research); }.tui .ok { color: var(--text); } .tui .dim { color: var(--muted); }
.line { display: flex; align-items: center; gap: 0 .2ch; padding: 2px 1ch; white-space: pre; overflow: hidden; min-height: 1.45em; }#top { flex-wrap: wrap; }#top .sep { color: #4a4842; padding: 0 .6ch; }#top .grp { display: inline-flex; }#top .meter { letter-spacing: -.05em; }#log { color: var(--bone-dim); text-overflow: ellipsis; display: block; }#log b { color: var(--amber); }
#insp { padding: 6px 1ch; overflow-y: auto; border-left: 1px solid var(--glass-line); font-size: 13px; }#insp .h { color: var(--text); font-weight: 600; letter-spacing: .04em; margin: 4px 0 2px; display: flex; justify-content: space-between; }#insp .h:first-child { margin-top: 0; }#insp .kv { display: grid; grid-template-columns: 13ch 1fr; white-space: pre-wrap; }#insp .kv .k { color: var(--muted); }#insp .kv.amb .k { color: var(--amber); } #insp .kv.red .k { color: var(--danger); } #insp .kv.dim { color: var(--muted); }#insp .tool { color: var(--amber); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--glass-line); }#insp .row { display: block; width: 100%; text-align: left; padding: 1px .5ch; }#insp .row.can { color: var(--amber); }#insp .row.got { color: var(--muted); opacity: 1; }#insp .desc { color: var(--muted); padding-left: 4.5ch; font-size: 12px; }#insp .x { color: var(--muted); }#insp u, #insp b { text-decoration-thickness: 2px; }
#cmd { display: flex; flex-wrap: wrap; gap: 0 1ch; padding: 3px 1ch 5px; }#cmd button { padding: 1px .4ch; }#cmd button i { font-style: normal; color: var(--muted); margin-left: .6ch; }#cmd button.locked { opacity: .35; }#cmd button.ready { color: var(--amber); }
#over { position: fixed; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(46ch, calc(100vw - 16px)); padding: 14px 2ch; background: var(--void); border: 1px solid var(--bone); box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--glass-line); display: flex; flex-direction: column; gap: 6px; }#over .h { color: var(--amber); font-weight: 600; }#over p { margin: 0; }#over .kv { display: grid; grid-template-columns: 18ch 1fr; }#over .kv .k { color: var(--muted); }#over button { align-self: flex-start; margin-top: 6px; color: var(--amber); border: 1px solid var(--amber); padding: 4px 1ch; }
@media (max-width: 700px) { .tui { font-size: 13px; } .tui #main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } #insp { border-left: 0; border-top: 1px solid var(--glass-line); max-height: 8.6em; font-size: 12px; } #top { padding: 0 4px; font-size: 12px; } #top .sep { padding: 0 .3ch; } #top button { min-height: 30px; min-width: 26px; padding: 0 .2ch; } #log { font-size: 12px; } #cmd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 3px 4px 6px; } #cmd button { min-height: 40px; border: 1px solid var(--glass-line); text-align: center; font-size: 12px; } #insp .row { min-height: 30px; } #insp.tall { max-height: 45vh; }}