:root { --green:#50fa7b; --dim:#86b890; --amber:#ffca62; --line:#1d5930; }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body {
  margin:0; min-height:100vh; display:grid; place-items:center; padding:20px;
  background:#020604;
  background-image:linear-gradient(rgba(80,250,123,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(80,250,123,.035) 1px,transparent 1px);
  background-size:36px 36px; color:#b9e9c3;
  font:16px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.terminal { width:min(850px,100%); min-height:560px; display:grid; grid-template-rows:auto 1fr auto auto; background:rgba(3,15,8,.96); border:1px solid var(--line); box-shadow:0 0 60px rgba(80,250,123,.10); }
header { min-height:50px; padding:0 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); color:var(--dim); font-size:13px; letter-spacing:.06em; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.online { margin-left:auto; color:var(--green); }
#output { padding:28px; overflow:auto; max-height:60vh; }
#output p { margin:0 0 9px; overflow-wrap:anywhere; }
#output .entered { margin-top:20px; color:#e5ffea; }
#output .entered::before { content:"guest@node:~$ "; color:var(--green); }
.warn { color:var(--amber); }
.success,strong { color:var(--green); }
form { margin:0 28px 22px; padding:13px 15px; display:flex; gap:10px; align-items:center; border:1px solid var(--line); background:#06110a; }
label { color:var(--green); white-space:nowrap; }
input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#fff; caret-color:transparent; font:inherit; }
.cursor { width:9px; height:19px; flex:none; background:var(--green); animation:blink 1s steps(1) infinite; }
footer { padding:12px 18px; border-top:1px solid var(--line); color:#54795c; font-size:12px; letter-spacing:.06em; }
@keyframes blink { 50% { opacity:0; } }
@media (max-width:600px) { body{padding:8px}.terminal{min-height:calc(100vh - 16px)}header{font-size:11px}#output{padding:20px}form{margin:0 20px 18px;flex-wrap:wrap}label{font-size:13px} }
@media (prefers-reduced-motion:reduce) { .cursor{animation:none} }
#output pre { margin:0 0 9px; font:inherit; font-size:13px; line-height:1.25; white-space:pre; overflow-x:auto; }
#output .train { overflow:hidden; }
.danger { color:#ff5c7a; }
form.busy .cursor { animation:none; opacity:.35; }
.matrix { position:fixed; inset:0; z-index:10; background:#000; cursor:pointer; }
.shake { animation:shake .12s linear 10; }
@keyframes shake { 25%{transform:translate(-6px,2px)} 50%{transform:translate(5px,-3px)} 75%{transform:translate(-3px,-2px)} }
@media (max-width:600px) { #output pre { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { .shake{animation:none} }