/* TULPA: one terminal. Everything is text, even the 3D. */
@font-face { font-family: 'GM'; src: url(../fonts/geist-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GM'; src: url(../fonts/geist-mono-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'GS'; src: url(../fonts/geist-sans-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GS'; src: url(../fonts/geist-sans-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
:root {
  --bg: #050506; --bg2: #0a0a0b; --panel: #0c0c0d; --line: #1c1b19; --line2: #2a2925;
  --fg: #e4e0d4; --fg2: #b9b5a9; --dim: #7c786e; --faint: #4a4741; --hot: #ffffff;
  --ok: #7dff9a; --warn: #ffb547; --bad: #ff5a4f; --sel: #e4e0d4;
  --mono: 'GM', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --sans: 'GS', system-ui, sans-serif;
  --bar: 30px; --status: 30px; --gut: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.6 var(--mono); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hot); }
::selection { background: var(--fg); color: #000; }
button, input, textarea, select { font: inherit; color: inherit; }
code, pre { font-family: var(--mono); }
[hidden] { display: none !important; }

/* CRT skin over everything */
.crt::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.crt::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 91; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.glow { text-shadow: 0 0 6px currentColor, 0 0 18px rgba(255,255,255,.08); }

/* tmux top bar */
.tbar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 50; display: flex; align-items: stretch; background: #0d0d0e; border-bottom: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.tbar .sess { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--fg); color: #000; font-weight: 600; letter-spacing: .08em; }
.tbar .sess i { width: 7px; height: 7px; border-radius: 50%; background: #000; animation: blink 1.6s steps(2) infinite; }
.tbar .wins { display: flex; overflow-x: auto; scrollbar-width: none; }
.tbar .wins::-webkit-scrollbar { display: none; }
.tbar .wins a { display: flex; align-items: center; padding: 0 11px; color: var(--dim); border-right: 1px solid var(--line); }
.tbar .wins a b { color: var(--faint); font-weight: 400; margin-right: 4px; }
.tbar .wins a:hover { color: var(--fg); }
.tbar .wins a[aria-current] { color: var(--fg); background: #17171a; }
.tbar .wins a[aria-current]::after { content: '*'; color: var(--ok); margin-left: 2px; }
.tbar .sp { flex: 1; }
.tbar .r { display: flex; align-items: stretch; }
.tbar .r > * { display: flex; align-items: center; padding: 0 11px; border-left: 1px solid var(--line); color: var(--fg2); background: none; border-top: 0; border-bottom: 0; border-right: 0; cursor: pointer; }
.tbar .r > *:hover { color: var(--hot); }
.tbar .r .clock { color: var(--dim); cursor: default; }
.tbar .menu { display: none; }

/* status line (bottom) */
.sline { position: fixed; bottom: 0; left: 0; right: 0; height: var(--status); z-index: 50; display: flex; align-items: center; background: #0d0d0e; border-top: 1px solid var(--line); font-size: 12px; white-space: nowrap; overflow: hidden; }
.sline .mode { padding: 0 10px; height: 100%; display: flex; align-items: center; background: #1a1a1d; color: var(--fg2); }
.sline .mode.live { background: var(--ok); color: #000; font-weight: 600; }
.sline .mode.off { background: var(--warn); color: #000; font-weight: 600; }
.sline .feed { flex: 1; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; color: var(--fg2); }
.sline .feed b { font-weight: 600; }
.sline .hint { padding: 0 12px; color: var(--faint); }
.sline .hint kbd { color: var(--fg2); font: inherit; border: 1px solid var(--line2); padding: 0 4px; }
.cmd { position: fixed; left: 0; right: 0; bottom: var(--status); z-index: 60; background: #0b0b0c; border-top: 1px solid var(--line2); padding: 8px var(--gut); display: none; }
.cmd.on { display: block; }
.cmd .row { display: flex; gap: 8px; align-items: center; }
.cmd .ps { color: var(--ok); }
.cmd input { flex: 1; background: none; border: 0; outline: 0; color: var(--fg); caret-color: var(--fg); }
.cmd .out { color: var(--fg2); white-space: pre-wrap; max-height: 40vh; overflow: auto; margin-bottom: 6px; }

/* page frame */
.page { padding: calc(var(--bar) + 28px) var(--gut) calc(var(--status) + 48px); max-width: 1240px; margin: 0 auto; }
.full { position: fixed; inset: var(--bar) 0 var(--status) 0; }
.k { color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.dim { color: var(--dim); } .faint { color: var(--faint); } .ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(26px, 4vw, 44px); line-height: 1.08; }
h2 { font-size: 18px; }
.lead { color: var(--fg2); max-width: 68ch; font-size: 14px; }
.prompt::before { content: '$ '; color: var(--faint); }
.cursor { display: inline-block; width: .6em; height: 1.1em; background: currentColor; vertical-align: -.18em; animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
hr.rule { border: 0; border-top: 1px dashed var(--line2); margin: 26px 0; }
.ascii { white-space: pre; line-height: 1; font-family: Consolas, 'Cascadia Mono', 'DejaVu Sans Mono', Menlo, monospace; font-size: 11px; color: var(--fg); margin: 0; overflow: hidden; }

/* panes */
.pane { border: 1px solid var(--line2); background: rgba(10,10,11,.86); backdrop-filter: blur(3px); }
.pane > .ph { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.pane > .ph .t { color: var(--fg); }
.pane > .ph .sp { flex: 1; }
.pane > .pb { padding: 10px 12px; }

/* lines of talk */
.ln { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px; padding: 3px 0; }
.ln .w { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ln .x { color: var(--fg); word-wrap: break-word; }
.ln.sys .x, .ln.sys .w { color: var(--faint); font-weight: 400; }
.ln.sys .x { font-style: italic; }
.ln.whisper .x { color: var(--fg2); font-style: italic; }
.ln.whisper .w { color: var(--dim); font-weight: 400; }
.ln.file .x { color: var(--dim); } .ln.file .x b { color: var(--ok); font-weight: 400; } .ln.file .x s { color: var(--bad); text-decoration: none; }
.ln.oracle .x { color: var(--hot); text-shadow: 0 0 10px rgba(255,255,255,.35); }
.ln.new .x { animation: typein .5s steps(14); }
@keyframes typein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ln.small { grid-template-columns: 70px minmax(0,1fr); font-size: 12px; }

/* buttons & inputs */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--line2); background: transparent; color: var(--fg); cursor: pointer; font-size: 12px; letter-spacing: .04em; }
.btn:hover { border-color: var(--fg); color: var(--hot); }
.btn.primary { background: var(--fg); color: #000; border-color: var(--fg); font-weight: 600; }
.btn.primary:hover { background: var(--hot); }
.btn.sm { height: 26px; padding: 0 10px; font-size: 11px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.in { width: 100%; background: #0b0b0c; border: 1px solid var(--line2); padding: 9px 11px; outline: 0; color: var(--fg); }
.in:focus { border-color: var(--fg2); }
textarea.in { min-height: 120px; resize: vertical; line-height: 1.55; }
.field { margin-bottom: 18px; }
.field label { display: flex; justify-content: space-between; color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.msg { padding: 9px 12px; border: 1px solid var(--line2); margin: 12px 0; font-size: 12px; }
.msg.err { border-color: #5a2420; color: #ffb4ad; } .msg.ok { border-color: #1f4a2a; color: #b9f5c7; }
.note { border-left: 2px solid var(--line2); padding: 6px 0 6px 14px; color: var(--fg2); font-size: 12.5px; }
.note b { color: var(--fg); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border: 1px solid var(--line2); font-size: 11px; color: var(--fg2); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag { font-weight: 600; }

/* tables / lists */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; color: var(--faint); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-bottom: 1px solid var(--line2); }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: #101012; }
.kv { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 6px 16px; margin: 0; font-size: 12.5px; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; word-break: break-all; }

/* diff & md */
.md { white-space: pre-wrap; word-wrap: break-word; font-size: 12.5px; line-height: 1.62; color: var(--fg2); }
.md .h1 { color: var(--hot); font-weight: 600; } .md .h2 { color: var(--fg); font-weight: 600; margin-top: 8px; display: inline-block; } .md .tk { font-weight: 600; } .md .red { color: var(--faint); }
.diff { font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.diff div { padding: 0 8px; }
.diff .a { background: rgba(125,255,154,.07); color: #b9f5c7; } .diff .a::before { content: '+ '; color: var(--ok); }
.diff .d { background: rgba(255,90,79,.07); color: #f0a49e; text-decoration: line-through; text-decoration-color: rgba(255,90,79,.35); } .diff .d::before { content: '- '; color: var(--bad); }
.diff .s { color: var(--faint); } .diff .s::before { content: '  '; }
.log { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.log li { display: flex; gap: 10px; padding: 5px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.log li:hover, .log li.on { background: #121214; }
.log li .h { color: var(--warn); } .log li .p { color: var(--ok); } .log li .m { color: var(--bad); }

/* toasts */
.toasts { position: fixed; right: 16px; bottom: calc(var(--status) + 16px); z-index: 99; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #111113; border: 1px solid var(--line2); padding: 9px 13px; font-size: 12px; max-width: 360px; animation: up .25s ease-out; }
.toast.warn { border-color: #5a4320; }
@keyframes up { from { transform: translateY(8px); opacity: 0; } }

/* boot */
.boot { position: fixed; inset: 0; z-index: 80; background: var(--bg); padding: 40px var(--gut); font-size: 13px; color: var(--fg2); overflow: hidden; transition: opacity .9s ease, filter .9s ease; }
.boot.out { opacity: 0; filter: blur(6px); pointer-events: none; }
.boot .l { white-space: pre-wrap; }
.boot .l .ok { color: var(--ok); }
.boot .skip { position: absolute; right: 16px; bottom: 16px; color: var(--faint); font-size: 11px; }

@media (max-width: 860px) {
  .tbar .wins { display: none; position: fixed; top: var(--bar); left: 0; right: 0; flex-direction: column; background: #0d0d0e; border-bottom: 1px solid var(--line2); }
  .tbar .wins.open { display: flex; }
  .tbar .wins a { padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tbar .menu { display: flex !important; }
  .tbar .r .hide-sm, .sline .hint { display: none !important; }
  .ln { grid-template-columns: 64px minmax(0,1fr); gap: 8px; }
  .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .cursor, .tbar .sess i { animation: none; } .ln.new .x { animation: none; } }