@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --primary:#00B894;--secondary:#55EFC4;--accent:#00CEC9;
  --bg:#0A0A0A;--surface:#111111;--border:#1A2A1A;
  --text:#00B894;--text-dim:#337755;--font:'JetBrains Mono','Courier New',monospace;
}

html{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5}
body{min-height:100vh;display:flex;flex-direction:column}

.terminal{flex:1;padding:1rem;max-width:900px;width:100%;margin:0 auto;display:flex;flex-direction:column}

/* Output */
.output{flex:1;overflow-y:auto;margin-bottom:.5rem;font-size:.85rem;white-space:pre-wrap;word-break:break-word}
.output .line{margin-bottom:.15rem;animation:fadeIn .15s}
.output .prompt-text{color:var(--secondary)}
.output .error{color:#EF4444}
.output .info{color:var(--accent)}
.output .highlight{color:var(--secondary);font-weight:700}
.output .dim{color:var(--text-dim)}
.output .ascii-art{color:var(--primary);font-weight:700}

/* Input */
.input-row{display:flex;align-items:center;gap:.3rem;font-size:.85rem;padding:.3rem 0;border-top:1px solid var(--border)}
.prompt-label{color:var(--secondary);font-weight:700;white-space:nowrap}
.cmd-input{flex:1;background:transparent;border:none;color:var(--text);font-family:var(--font);font-size:.85rem;outline:none;caret-color:var(--primary)}

/* Scrollbar */
.output::-webkit-scrollbar{width:6px}
.output::-webkit-scrollbar-thumb{background:var(--text-dim);border-radius:3px}
.output::-webkit-scrollbar-track{background:transparent}

/* CRT effect */
.crt::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03)3px);pointer-events:none;z-index:999}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}