:root { --ink:#0A0B0A; --panel:#101210; --line:#262A25; --text:#DAD6C8; --dim:#7D8177; --hot:#FF6B2C; --up:#7BE495; --dn:#FF6161; --mono:'IBM Plex Mono', ui-monospace, Consolas, monospace }
* { box-sizing:border-box }
html, body { height:100%; margin:0; background:var(--ink); color:var(--text); font:13px/1.55 var(--mono) }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:9; background:repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px) }
b { font-weight:600 }
button { font:inherit; color:inherit; background:none; border:0; padding:0; text-align:left; cursor:pointer }

.app { height:100vh; display:grid; grid-template-columns:minmax(360px, 37fr) minmax(0, 63fr) }

/* The terminal: thoughts scroll up from the prompt. */
.term { min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--ink) }
.term-top { flex:none; display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line) }
.term-top b { font:800 15px 'Martian Mono', var(--mono); letter-spacing:-.02em; color:var(--hot) }
.live { font-size:11px; color:var(--up) } .live::before { content:"● " } .live.off { color:var(--dim) }
.log { flex:1; min-height:0; overflow-y:auto; padding:16px 18px 6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent }
.entry { margin-bottom:16px; animation:rise .25s ease-out }
@keyframes rise { from { opacity:0; transform:translateY(5px) } }
.call { display:flex; gap:9px; color:var(--text); font-weight:600 }
.call::before { content:"●"; color:var(--up); flex:none }
.entry.loss .call::before { color:var(--dn) } .entry.look .call::before { color:var(--hot) }
.call em { color:var(--dim); font:inherit; font-weight:400 }
.out { display:flex; gap:9px; color:var(--dim); padding-left:2px } .out::before { content:"⎿"; flex:none }
.say { margin:5px 0 0 18px; white-space:pre-wrap; overflow-wrap:anywhere }
.say .caret { display:inline-block; width:.55em; height:1em; margin-left:2px; vertical-align:-2px; background:var(--hot); animation:blink 1s steps(2) infinite }
@keyframes blink { 50% { opacity:0 } }
.term-input { flex:none; padding:0 18px 12px }
.spin { min-height:21px; color:var(--hot) } .spin span { color:var(--dim) }
.prompt { display:flex; align-items:center; gap:9px; padding:7px 11px; border:1px solid var(--line); border-radius:6px; color:var(--dim) }
.prompt i { width:8px; height:15px; background:var(--dim); animation:blink 1.1s steps(2) infinite }
.status { display:flex; justify-content:space-between; gap:12px; padding:6px 2px 0; color:var(--dim); font-size:11px }

/* The instruments on the right. */
.side { min-width:0; min-height:0; display:grid; grid-template-rows:minmax(0, 1fr) auto minmax(190px, 34vh) }
.monitor { min-height:0; display:flex; flex-direction:column; border-bottom:1px solid var(--line) }
.bar { flex:none; padding:7px 14px; border-bottom:1px solid var(--line); background:var(--panel) }
.url { display:block; color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.screen { position:relative; flex:1; min-height:0; overflow:hidden; background:#000 }
#frame { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left }
#frame.soft { filter:blur(18px); transform:scale(1.08) }
.cursor { position:absolute; left:0; top:0; z-index:3; pointer-events:none; opacity:0; transition:transform .95s cubic-bezier(.45,.05,.2,1), opacity .3s; filter:drop-shadow(0 2px 4px #000c) }
.cursor.on { opacity:1 }
.ripple { position:absolute; z-index:2; width:14px; height:14px; margin:-7px; border-radius:50%; pointer-events:none; opacity:0; border:2px solid var(--hot) }
.ripple.go { animation:ring .6s ease-out }
@keyframes ring { from { opacity:1; transform:scale(.6) } to { opacity:0; transform:scale(4.5) } }
.wait { position:absolute; left:12px; bottom:12px; z-index:3; padding:2px 8px; background:var(--ink); color:var(--hot); font-size:11px; display:none } .wait.on { display:block }

.ids { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto auto; border-bottom:1px solid var(--line) }
.id, .num { min-width:0; padding:8px 14px; border-right:1px solid var(--line) } .num:last-child { border-right:0 }
.id span, .num span { display:block; color:var(--dim); font-size:11px }
.id b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500 }
.id:hover b { color:var(--hot) } .id.copied span { color:var(--up) }
.num b { white-space:nowrap }

.tables { min-height:0; display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr) }
.panel { min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--line) } .panel:last-child { border-right:0 }
h2 { flex:none; margin:0; padding:7px 14px; border-bottom:1px solid var(--line); color:var(--dim); font-size:11px; font-weight:500 } h2 span { color:var(--text) }
.rows { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent }
.empty { padding:12px 14px; color:var(--dim) }
.row { display:grid; align-items:center; gap:10px; padding:6px 14px; border-bottom:1px solid #1a1d19 }
.pos { grid-template-columns:minmax(58px, 1fr) minmax(110px, 2fr) 72px }
.trade { grid-template-columns:minmax(0, 1fr) auto 44px }
.sym { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text) }
.range { min-width:0 } .range small { display:flex; justify-content:space-between; color:var(--dim); font-size:10px }
.track { position:relative; height:5px; margin-top:3px; background:linear-gradient(90deg, #7be49555, #ff616155) } .track i { position:absolute; top:-2px; width:2px; height:9px; background:var(--text) }
.val { text-align:right; white-space:nowrap } .up { color:var(--up) } .dn { color:var(--dn) } .at { color:var(--dim); text-align:right; font-size:11px }

@media (max-width:980px) {
  html, body { height:auto }
  .app { height:auto; display:flex; flex-direction:column }
  .side { display:contents } .monitor { order:1 } .term { order:2; height:66vh; border-right:0; border-top:1px solid var(--line) } .ids { order:3; border-top:1px solid var(--line) } .tables { order:4 }
  .screen { height:52vw; flex:none }
  .ids { grid-template-columns:1fr 1fr } .id { border-bottom:1px solid var(--line) } .id:nth-child(2) { border-right:0 }
  .tables { display:block } .panel { height:240px; border-right:0; border-bottom:1px solid var(--line) }
}
@media (prefers-reduced-motion:reduce) { .cursor { transition:none } .entry, .ripple.go, .say .caret, .prompt i { animation:none } }