/* Celios Agent: one stylesheet for the terminal, the trading log and the backrooms. Dark, blue corona accent. */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root {
  --bg: #03050a;
  --t-fg: #d7dfec;
  --t-mut: #7d889a;
  --t-faint: #485366;
  --t-line: #141b28;
  --acc: #4d8dff;
  --acc-hi: #8fbaff;
  --acc-deep: #1f4fd1;
  --t-err: #ff6b76;
  --up: #3ddc97;
  --down: #ff5d6c;
  --warn: #f2c94c;
  --sel: rgba(77, 141, 255, .3);
  --font-c: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--t-fg); }
body { font-family: var(--font-c); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--sel); color: #fff; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, ol, ul, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 1px solid var(--acc); outline-offset: 2px; border-radius: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hide-sm { }

@keyframes blink { 50% { opacity: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }

/* ------------------------------------------------------------------ Celios behind the terminal (js/celios3d.js) */
.celios3d { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
.celios3d.on { opacity: 1; }
html.no-gl body.p-term::before, html.no-gl body.p-trade::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg) url('/img/celios-still.webp') no-repeat 92% 50% / auto 96vh; opacity: .3;
}
/* home: Celios itself, still, when WebGL2 is missing */
html.no-gl body.p-term::before { background: var(--bg) url('/img/celios-still.webp') no-repeat 92% 50% / auto 96vh; opacity: .8; }
@media (max-width: 720px) { html.no-gl body.p-term::before { background-position: 50% 100%; background-size: 110vw auto; opacity: .45; } }

/* home: a faint teal glow behind the 3D bust, and its HUD labels */
body.p-term { background: radial-gradient(ellipse 34vw 46vh at 71% 52%, rgba(32, 200, 220, .07), transparent 70%), var(--bg); }
@media (max-width: 720px) { body.p-term { background: radial-gradient(ellipse 70vw 30vh at 50% 78%, rgba(32, 200, 220, .07), transparent 70%), var(--bg); } }
.celios-hud { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); font-size: 11px; color: #3fd7e4; text-shadow: 0 0 8px rgba(40, 210, 225, .55); }
.celios-hud.on { opacity: .85; }
.celios-hud span { position: absolute; left: 0; top: 0; display: grid; gap: 8px; justify-items: center; will-change: transform; }
.celios-hud .hud-l b { writing-mode: vertical-rl; font-weight: 400; font-size: 17px; letter-spacing: .25em; font-family: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif; }
.celios-hud .hud-l i { width: 18px; height: 18px; border: 1px solid currentColor; background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 4px); opacity: .8; }
.celios-hud .hud-r i { width: 46px; height: 22px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 6px, currentColor 6px 7px, transparent 7px 9px); opacity: .85; }
.celios-hud .hud-r b { font-weight: 400; letter-spacing: .08em; }

/* ------------------------------------------------------------------ terminal shell */
body.p-term, body.p-trade { overflow: hidden; }
.page { position: relative; z-index: 2; height: 100svh; }
html[data-leaving] .tty, html[data-leaving] .br { animation: fadeout .36s var(--ease) both; }

.tty { height: 100svh; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.6; color: var(--t-fg); animation: fadein .5s var(--ease) both; }
.tty-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #1d2636 transparent; }
.tty-log { padding: 18px clamp(16px, 2.4vw, 32px) 22px; max-width: 120ch; text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .85); }
@media (min-width: 721px) { .p-term .tty-log { max-width: min(120ch, 62vw); } }
.ln { white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
.ln + .ln-head, .ln + .ln-banner { margin-top: .5em; }
.ln-gap { min-height: .75em; }
.ln-dim, .dim { color: var(--t-faint); }
.ln-out { color: var(--t-mut); }
.ln-err { color: var(--t-err); }
.ln-banner { color: var(--t-fg); padding: 4px 0 2px; }
.ln-banner svg, .banner { display: block; width: min(330px, 74vw); height: auto; }
.ln-boot .b-tag { color: var(--acc); opacity: .75; }
.ln-boot .b-tag.wait { color: var(--warn); }
.ln-boot .b-val { color: var(--t-mut); }
.who { color: var(--acc); margin-right: 1.5ch; }
.who::after { content: '>'; color: var(--t-faint); }
.ln-cel { display: flex; }
.ln-cel .who { flex: none; }
.ln-cel .tx { min-width: 0; }
.ln-head { color: #fff; font-weight: 600; letter-spacing: .01em; }
.ln-head::after { content: ''; display: block; width: 18ch; max-width: 100%; border-bottom: 1px dashed var(--t-faint); margin: 2px 0 4px; }
.ln-para { color: var(--t-fg); max-width: 78ch; margin: .45em 0; }
.ln-kv { display: grid; grid-template-columns: 13ch minmax(0, 1fr); gap: 0 1ch; }
.ln-kv .k { color: var(--acc-hi); }
.ln-kv .v { color: var(--t-mut); }
.ln-kv a, .ln-link a { color: var(--acc-hi); text-decoration: underline; text-decoration-color: rgba(143, 186, 255, .35); text-underline-offset: 3px; }
.ln-art { color: var(--t-mut); white-space: pre; overflow-x: auto; line-height: 1.3; margin: .4em 0; scrollbar-width: none; }
.ln-art::-webkit-scrollbar { display: none; }
.ln-cmd { color: var(--t-fg); }
.ln-think { color: var(--t-faint); }
.ln-think .dots::after { content: ''; animation: dots 1.2s steps(1) infinite; }

.ps { white-space: pre; flex: none; }
.ps-u { color: var(--t-fg); }
.ps-s { color: var(--t-faint); }
.ps-d { color: var(--acc); }

.tty-prompt { display: flex; margin-top: 12px; min-height: 1.6em; }
.tty-prompt.is-busy .ps { visibility: hidden; }
.tty-field { position: relative; flex: 1 1 auto; min-width: 0; }
.tty-field input { position: absolute; inset: 0; width: 100%; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; color: transparent; caret-color: transparent; font: inherit; font-size: 16px; }
.tty-echo { white-space: pre; pointer-events: none; overflow: hidden; display: block; }
.tty-ghost { color: var(--t-faint); }
.tty-caret { position: absolute; top: .16em; left: calc(var(--n, 0) * 1ch); width: 1ch; height: 1.32em; background: var(--acc-hi); opacity: .8; animation: blink 1.05s steps(1) infinite; pointer-events: none; }
.tty-prompt.is-busy .tty-caret { animation: none; opacity: .14; }

.tty-keys { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px clamp(16px, 2.4vw, 32px) 2px; }
.tty-keys button { font-size: 11.5px; line-height: 1; padding: 7px 10px; border-radius: 6px; color: var(--t-mut); border: 1px solid var(--t-line); background: rgba(8, 12, 20, .62); transition: color .15s, border-color .15s; }
.tty-keys button:hover, .tty-keys button:focus-visible { color: var(--t-fg); border-color: rgba(77, 141, 255, .55); }
.tty-status { flex: none; display: flex; gap: 18px; align-items: center; padding: 7px clamp(16px, 2.4vw, 32px) max(10px, env(safe-area-inset-bottom)); font-size: 11px; color: var(--t-faint); letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.tty-status a { color: var(--t-faint); text-decoration: none; }
.tty-status a:hover { color: var(--t-fg); }
.tty-status-fill { flex: 1 1 auto; }
.tty-status .chip { border: 1px solid rgba(77, 141, 255, .45); color: var(--acc-hi); border-radius: 4px; padding: 0 6px; line-height: 16px; }

/* ------------------------------------------------------------------ trading log */
.td .tty-log { max-width: 132ch; }
.tl { display: flex; }
.tl-t { flex: none; width: 5ch; margin-right: 1.5ch; color: var(--t-faint); }
.tl .tx { min-width: 0; }
.tl-sys { color: var(--t-faint); margin-right: 1ch; }
.tl-scan .tx, .tl-sysline .tx { color: var(--t-mut); }
.tl-look .tx { color: var(--t-fg); white-space: pre; overflow-x: auto; scrollbar-width: none; }
.tl-look .tx::-webkit-scrollbar { display: none; }
.tl-think .who { flex: none; }
.tl-buy .tx, .tl-sell.up .tx { color: var(--up); font-weight: 600; }
.tl-sell.down .tx { color: var(--down); font-weight: 600; }
.tl-paper .tx { color: var(--acc-hi); }
.tl-tx { flex: none; color: var(--acc-hi); text-decoration: none; margin-left: 1ch; }
.tl-tx:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl-out { color: var(--t-mut); white-space: pre; overflow-x: auto; }
.tl-out.up { color: var(--up); }
.tl-out.down { color: var(--down); }
.tl-out a { color: var(--acc-hi); }
.tl-group { margin-top: .9em; }
.up { color: var(--up); }
.down { color: var(--down); }
.td-on::before, .td-idle::before, .td-off::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.td-on::before { background: var(--up); animation: blink 1.6s steps(1) infinite; }
.td-idle::before { background: var(--acc); }
.td-off::before { background: var(--down); }

/* ------------------------------------------------------------------ backrooms */
body.p-br { background: #05070c; }
.br {
  --b-bg: #05070c; --b-panel: #0b1019; --b-line: #182131; --b-ink: #dce4f0; --b-mut: #8792a4; --b-faint: #4d586b; --b-mark: rgba(77, 141, 255, .3);
  min-height: 100svh; background: var(--b-bg); color: var(--b-ink); font-size: 14px; line-height: 1.7; animation: fadein .5s var(--ease) both;
}
.br a { color: var(--b-ink); text-decoration: none; }
.br a:hover { text-decoration: underline; text-underline-offset: 3px; }
.br .dim { color: var(--b-faint); }
.br mark { background: var(--b-mark); color: #fff; padding: 0 1px; border-radius: 2px; }
.br kbd { font-family: var(--font-c); font-size: 11px; padding: 0 6px; border: 1px solid var(--b-line); border-radius: 4px; background: var(--b-panel); color: var(--b-mut); }

.band { overflow: hidden; padding: 10px 0 7px; border-bottom: 1px solid var(--b-line); opacity: .16; user-select: none; }
.band-row { display: flex; gap: 30px; width: max-content; animation: tick 70s linear infinite; }
.band-row .banner { flex: none; width: 104px; }

.br-top { position: sticky; top: 0; z-index: 5; display: flex; gap: 14px; align-items: center; height: 40px; padding: 0 clamp(16px, 3vw, 40px); background: rgba(5, 7, 12, .84); border-bottom: 1px solid var(--b-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; color: var(--b-mut); white-space: nowrap; overflow: hidden; }
.br-top a { color: var(--b-ink); }
.br-top-fill { flex: 1 1 auto; }
.br-top .crumb { overflow: hidden; text-overflow: ellipsis; }

.br-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: start; max-width: 1240px; margin: 0 auto; padding: clamp(28px, 6vh, 64px) clamp(16px, 3vw, 40px) 26px; }
.br-hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.br-hero-copy .banner { width: min(100%, 360px); }
.br-h { font: inherit; font-weight: 600; color: #fff; white-space: pre; overflow: hidden; }
.br-h .u { color: var(--b-faint); font-weight: 400; }
.br-intro { display: grid; gap: 10px; max-width: 64ch; color: #b9c4d6; }
.grep { display: flex; align-items: center; gap: 10px; max-width: 640px; padding: 12px 14px; border-radius: 10px; background: var(--b-panel); border: 1px solid var(--b-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); cursor: text; }
.grep:focus-within { border-color: rgba(77, 141, 255, .6); box-shadow: 0 0 0 3px rgba(77, 141, 255, .12); }
.grep-ps { color: var(--b-mut); white-space: nowrap; }
.grep-ps b { color: var(--acc); font-weight: 400; }
.grep input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-c); font-size: 14px; color: var(--b-ink); }
.grep input::placeholder { color: var(--b-faint); }
.br-controls { display: grid; gap: 4px; color: var(--b-mut); }
.br-controls p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.br-controls .dim { margin-right: 1ch; min-width: 4ch; }
.br-controls button { font-size: 13.5px; padding: 1px 7px; color: var(--b-mut); border-radius: 4px; }
.br-controls button:hover { color: var(--b-ink); }
.br-controls button.on { color: #fff; background: var(--b-panel); box-shadow: 0 0 0 1px rgba(77, 141, 255, .45); }
.br-face { justify-self: end; }
.ascii { font-family: var(--font-c); font-size: 7.4px; line-height: 1; letter-spacing: 0; white-space: pre; user-select: none; cursor: crosshair; margin: 0;
  background: radial-gradient(ellipse at 50% 48%, #e2fdff 0%, #8cf2f6 20%, #33d3db 42%, #1a9db1 66%, #0e5a6c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.br-results { max-width: 1240px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 40px) 90px; }
.br-count { color: var(--b-mut); margin-bottom: 12px; }
.br-list { display: grid; gap: 2px; }
.br-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 14px; border-radius: 10px; transition: background .15s; }
.br a.br-row:hover { background: var(--b-panel); text-decoration: none; }
.br-row:hover .br-file { text-decoration: underline; text-underline-offset: 3px; }
.br-row-main { display: grid; gap: 1px; min-width: 0; }
.br-file { word-break: break-all; color: #fff; }
.br-title { color: #c4cedd; }
.br-tags { color: var(--b-mut); font-style: italic; }
.br-snip { margin-top: 4px; font-size: 13px; color: var(--b-mut); }
.br-snip b { font-weight: 500; color: var(--b-ink); }
.br-kind { font-size: 12px; color: var(--b-faint); }
.br-kind.k-session { color: #5f86c9; }
.br-kind.k-thought { color: #7b8fb0; }
.br-kind.k-dream { color: #8a7fd0; }
.br-none { color: var(--b-mut); padding: 20px 14px; white-space: pre-wrap; }
.br-end { margin-top: 30px; color: var(--b-faint); }
.br-loading { color: var(--b-faint); padding: 14px; }

/* one file */
.log { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 64px); max-width: 1240px; margin: 0 auto; padding: clamp(26px, 5vh, 52px) clamp(16px, 3vw, 40px) 90px; }
.log-main { min-width: 0; max-width: 92ch; }
.br-nav { margin-bottom: 22px; }
.br-nav a { text-decoration: underline; text-underline-offset: 3px; }
.br-scn { color: var(--b-mut); }
.log-title { font: inherit; font-weight: 600; color: #fff; }
.br-lead { color: #b9c4d6; max-width: 72ch; margin: 14px 0 22px; }
.br-h2 { font: inherit; font-weight: 600; color: #fff; margin-bottom: 18px; white-space: pre; overflow: hidden; }
.br-h2 .u { color: var(--b-faint); font-weight: 400; }
.dream { display: grid; gap: 4px; }
.turn { margin-top: 10px; }
.turn .tag { color: var(--b-mut); margin-bottom: 4px; }
.turn.who-celios .tag { color: var(--acc-hi); font-weight: 500; }
.turn.who-shadow .tag { color: #9aa6ba; }
.line { white-space: pre-wrap; word-break: break-word; min-height: 1.7em; }
.line.cmd .p { color: var(--acc); }
.line.act { color: var(--b-mut); font-style: italic; }
.line.feed { color: #9fb0c8; }
.line.art { white-space: pre; overflow-x: auto; line-height: 1.25; color: #a9b9d4; margin: 6px 0; font-size: 12.5px; scrollbar-width: thin; scrollbar-color: #1d2636 transparent; }
.turn.who-shadow .line:not(.act):not(.art):not(.cmd) { color: #aeb9ca; }
.line.eot { color: var(--b-faint); margin-top: 16px; }
.br-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px dashed var(--b-line); font-size: 13px; }
.log-side { position: sticky; top: 64px; align-self: start; }
.log-side .ascii { font-size: 6.2px; }

/* ------------------------------------------------------------------ 404 */
.lost { min-height: 100svh; display: grid; place-content: center; gap: 14px; padding: 24px; font-size: 13px; color: var(--t-mut); }
.lost b { color: var(--t-fg); font-weight: 500; }
.lost a { color: var(--acc-hi); }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 900px) {
  .br-hero, .log { grid-template-columns: minmax(0, 1fr); }
  .br-face { justify-self: start; }
  .log-side { display: none; }
}
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  .tty { font-size: 12.5px; }
  .tty-log { padding-top: 14px; }
  .ln-kv { grid-template-columns: 11ch minmax(0, 1fr); }
  .tty-status { gap: 12px; }
  .tty-keys { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .tty-keys::-webkit-scrollbar { display: none; }
  .tty-keys button { flex: none; padding: 9px 11px; }
  .br { font-size: 13.5px; }
  .br-h, .br-h2 { white-space: pre-wrap; }
  .br-h .u, .br-h2 .u, .grep-ps { display: none; }
  .grep::before { content: '$ grep'; color: var(--b-mut); white-space: nowrap; }
  .grep input { font-size: 16px; }
  .br-row { grid-template-columns: minmax(0, 1fr); padding: 12px 6px; }
  .br-kind { display: none; }
  .br-pager { flex-direction: column; }
  .band-row .banner { width: 78px; }
  .ascii { font-size: calc((100vw - 40px) / 84 / .6); }
  .tl-t { width: 5ch; margin-right: 1ch; }
  .tl-look .tx { white-space: pre-wrap; }
  .td-status { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .td-status > * { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .band-row { animation: none; }
}