:root{--bg:#0b0f0c;--fg:#9dff9d;--dim:#4f7a4f;--panel:#111;--accent:#c7a0ff;--font:ui-monospace,"JetBrains Mono","Fira Code",Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:#000;color:var(--fg);display:flex;flex-direction:column}
.terminal{position:relative;flex:1 1 50%;min-height:0;background:var(--bg);overflow:hidden;padding:0 1.25rem 1rem;border-bottom:1px solid #222}
.titlebar{display:flex;align-items:center;gap:.4rem;padding:.5rem 0;color:var(--dim);font-size:.8rem}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}.dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
.title{margin-left:.5rem}
.line{font-family:inherit;font-size:1rem;line-height:1.6;white-space:pre-wrap}
.prompt{color:var(--accent)}
.out{font-size:clamp(1.4rem,4vw,3rem);line-height:1.4;margin:.5rem 0;text-shadow:0 0 8px rgba(157,255,157,.5)}
.cursor{display:inline-block;width:.6em;height:1.1em;background:var(--fg);vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* cat */
.cat{position:absolute;left:0;top:0;width:48px;height:32px;will-change:transform;transition:transform .9s cubic-bezier(.4,0,.2,1);pointer-events:none}
.sprite{position:relative;width:48px;height:32px;image-rendering:pixelated}
.sprite>div{position:absolute;background:#f3f3f3}
.body{left:8px;top:12px;width:28px;height:14px;border-radius:7px}
.head{left:28px;top:6px;width:16px;height:14px;border-radius:5px}
.ear{top:2px;width:5px;height:6px;clip-path:polygon(0 100%,50% 0,100% 100%)}.ear.l{left:29px}.ear.r{left:38px}
.eye{top:11px;width:2px;height:3px;background:#222}.eye.l{left:33px}.eye.r{left:39px}
.tail{left:0;top:8px;width:10px;height:4px;border-radius:2px;transform-origin:right center;animation:wag 1.2s ease-in-out infinite}
.leg{top:24px;width:4px;height:8px;border-radius:0 0 2px 2px}
.leg.a{left:10px}.leg.b{left:16px}.leg.c{left:26px}.leg.d{left:32px}
.cat.running .leg.a,.cat.running .leg.c{animation:step .25s ease-in-out infinite}
.cat.running .leg.b,.cat.running .leg.d{animation:step .25s ease-in-out infinite reverse}
.cat.running .sprite{animation:bob .25s ease-in-out infinite}
.cat.flip .sprite{transform:scaleX(-1)}
.cat.flip.running .sprite{animation:bobflip .25s ease-in-out infinite}
@keyframes step{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes bobflip{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-2px)}}
@keyframes wag{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(20deg)}}

/* chat */
.chat{flex:1 1 50%;min-height:0;display:flex;flex-direction:column;background:var(--panel);color:#ddd}
.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:75%;padding:.5rem .75rem;border-radius:6px;white-space:pre-wrap;word-break:break-word;font-size:.95rem}
.cat-msg{background:#1e2a1e;color:var(--fg);align-self:flex-start}
.user-msg{background:#2a2140;color:#e8dcff;align-self:flex-end}
.err-msg{background:#3a1c1c;color:#ffb4b4;align-self:flex-start}
.composer{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid #222;align-items:center}
.composer input{flex:1;font:inherit;padding:.6rem .75rem;background:#000;color:var(--fg);border:1px solid #333;border-radius:4px;outline:none}
.composer input:focus{border-color:var(--accent)}
.composer button{font:inherit;padding:.6rem 1rem;background:var(--accent);color:#000;border:0;border-radius:4px;cursor:pointer}
.composer button:disabled{opacity:.5;cursor:wait}
.count{color:var(--dim);font-size:.8rem;min-width:4.5ch;text-align:right}