:root { --bg: #0f1115; --panel: #171a21; --line: #2a2f3a; --text: #e8e6e3; --dim: #9aa0aa; --accent: #ffb547; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
h1 { font-size: 18px; margin: 0 8px 0 0; }
h2 { font-size: 13px; margin: 0 0 6px; font-weight: 600; }
h2 small { color: var(--dim); font-weight: 400; margin-left: 6px; }
button { background: #232834; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; }
button:hover { border-color: var(--accent); }
button.on { background: #3a2e17; border-color: var(--accent); }
.modes { display: flex; gap: 4px; }
.speed, .spont { color: var(--dim); display: flex; align-items: center; gap: 6px; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: calc(100% - 52px); }
#world-panel { display: flex; flex-direction: column; min-height: 420px; }
#view { position: relative; flex: 1; min-height: 0; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#activity { position: absolute; top: 10px; left: 10px; background: #000a; padding: 6px 10px; border-radius: 8px; display: flex; flex-direction: column; }
#activity-label { font-size: 18px; font-weight: 600; }
#activity-cause { color: var(--dim); font-size: 12px; }
#banner { position: absolute; top: 10px; right: 10px; max-width: 46%; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
#banner div { background: #000b; border-left: 3px solid var(--accent); padding: 5px 9px; border-radius: 6px; font-size: 13px; animation: fade 6s forwards; }
@keyframes fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
#stimuli { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--panel); }
aside { overflow-y: auto; border-left: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
#brain { width: 100%; height: 260px; display: block; }
#eye { width: 100%; height: 150px; display: block; }
#plots { width: 100%; height: 300px; display: block; }
.legend { color: var(--dim); font-size: 11px; margin: 4px 0 0; }
.legend span { margin-right: 8px; white-space: nowrap; }
#senses { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 12px; }
#senses .bar { height: 10px; background: #252a35; border-radius: 4px; overflow: hidden; align-self: center; }
#senses .bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .1s; }
dialog { max-width: 640px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; }
dialog::backdrop { background: #0008; }
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; height: auto; }
  #world-panel { height: 82vh; min-height: 0; }
  aside { border-left: 0; }
  header { gap: 6px; padding: 6px 8px; }
  h1 { font-size: 16px; width: 100%; }
  header button { padding: 5px 8px; font-size: 13px; }
  #stimuli { gap: 4px; padding: 6px; }
  #stimuli button { padding: 4px 7px; font-size: 12.5px; }
  #activity-label { font-size: 15px; }
  #banner { max-width: 60%; }
}