:root{--bg:#0f1226;--panel:#151a36;--line:#2a3366;--neon:#7CFFB2;--cy:#4fe3ff;--pu:#b78cff;--or:#ffa24f;--txt:#cfd6ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 30% 0%,#1d2350,transparent 60%),repeating-linear-gradient(0deg,transparent 0 23px,#ffffff06 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,#ffffff06 23px 24px),var(--bg);color:var(--txt);font-family:'IBM Plex Mono',monospace;min-height:100vh}
header{padding:18px 20px 8px;border-bottom:1px solid var(--line)}
h1{font-family:'VT323',monospace;font-size:clamp(28px,5vw,52px);margin:0;color:var(--neon);text-shadow:0 0 12px #7cffb288;letter-spacing:2px}
h1 span{font-size:.5em;color:var(--or)}
header p{margin:2px 0 0;font-weight:200;font-size:13px}
main{display:grid;grid-template-columns:2fr 1fr;gap:14px;padding:14px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 0 18px #7cffb214 inset}
.panel-title{font-family:'VT323';font-size:20px;color:var(--neon);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.panel-title.small{font-size:16px;margin-top:8px}
.legend{font-family:'IBM Plex Mono';font-size:11px;color:var(--txt)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px 0 10px}
.c1{background:var(--cy)}.c2{background:var(--pu)}.c3{background:var(--or)}
.canvas-wrap{position:relative}
#canvas{width:100%;height:460px;display:block;cursor:crosshair}
#creature{width:100%;height:230px;display:block;background:linear-gradient(#1a2a3a,#16301f);border-radius:8px}
#tip{position:absolute;pointer-events:none;background:#000c;border:1px solid var(--neon);padding:6px 8px;font-size:11px;border-radius:6px;display:none;white-space:pre}
#thought{margin-top:8px;background:#fff;color:#222;border-radius:16px;padding:10px 12px;font-size:13px;position:relative;min-height:40px}
#mood{font-size:22px}
#log{list-style:none;margin:0;padding:0;font-size:11px;height:130px;overflow:hidden}
#log li{padding:2px 0;border-bottom:1px dashed #2a3366;opacity:.9}
#controls{margin:0 14px}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;align-items:center}
button,select,input:not([type=range]){font-family:inherit;background:#0b0e20;color:var(--neon);border:1px solid var(--neon);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}
button:hover{background:var(--neon);color:#0b0e20}
.stim button{border-color:var(--cy);color:var(--cy)}
.stim button:hover{background:var(--cy);color:#000}
.sliders label{font-size:12px;display:flex;flex-direction:column;flex:1;min-width:140px}
input[type=range]{accent-color:var(--neon)}
summary{font-family:'VT323';font-size:18px;color:var(--neon);cursor:pointer}
#strip{display:grid;grid-template-columns:repeat(50,1fr);gap:2px;margin-top:6px}
#strip div{height:28px;border-radius:2px}
.note{font-size:11px;font-weight:200;margin:6px 0 0}
footer{text-align:center;padding:16px;font-size:12px}
footer a{color:var(--or)}
@media(max-width:800px){main{grid-template-columns:1fr}#canvas{height:340px}#strip{grid-template-columns:repeat(25,1fr)}}