:root {
  --bg:      #07070f;
  --bg2:     #0d0d1c;
  --green:   #39ff14;
  --cyan:    #00d4ff;
  --purple:  #a78bfa;
  --pink:    #f472b6;
  --yellow:  #fbbf24;
  --red:     #f87171;
  --white:   #e2e8f0;
  --dim:     #4b5563;
  --dim2:    #6b7280;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--green);
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
}
/* scanlines */
body::after{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px);
  pointer-events:none;z-index:9999;
}
/* matrix canvas */
#mx{position:fixed;top:0;left:0;width:100%;height:100%;opacity:.035;z-index:0;pointer-events:none}

/* ── BOOT ─────────────────────────────── */
#boot{
  position:fixed;inset:0;background:var(--bg);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:2rem;
}
#boot-inner{width:100%;max-width:780px;font-size:13px;line-height:1.9}
#boot-inner .ok  {color:var(--green)}
#boot-inner .warn{color:var(--yellow)}
#boot-inner .hdr {color:var(--cyan);font-weight:700}
#boot-inner .dim {color:var(--dim2)}

/* ── TERMINAL WRAPPER ─────────────────── */
#app{
  position:relative;z-index:10;max-width:980px;margin:0 auto;
  padding:1.5rem;min-height:100vh;display:none;flex-direction:column;
}

/* title bar */
.tbar{
  display:flex;align-items:center;gap:.5rem;margin-bottom:1.4rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--dim);
}
.dot{width:12px;height:12px;border-radius:50%}
.dr{background:#ff5f57}.dy{background:#febc2e}.dg{background:#28c840}
.tbar-title{color:var(--dim2);font-size:12px;margin:0 auto}

/* output */
#out{flex:1;padding-bottom:1rem}
.line{margin-bottom:.05rem;word-break:break-word}

/* input row */
.irow{display:flex;align-items:center;gap:.4rem;margin-top:.4rem;flex-shrink:0}
.ps1 span.u{color:var(--purple)}
.ps1 span.h{color:var(--cyan)}
.ps1 span.ar{color:var(--cyan)}
.ps1 span.d{color:var(--dim2)}
#inp{
  background:transparent;border:none;outline:none;
  color:var(--white);font-family:inherit;font-size:inherit;
  flex:1;caret-color:var(--green);
}

/* colour helpers */
.g  {color:var(--green)}
.c  {color:var(--cyan)}
.p  {color:var(--purple)}
.pk {color:var(--pink)}
.y  {color:var(--yellow)}
.r  {color:var(--red)}
.w  {color:var(--white)}
.d  {color:var(--dim2)}
.b  {font-weight:700}
.glow-c{text-shadow:0 0 8px var(--cyan),0 0 20px var(--cyan)}
.glow-g{text-shadow:0 0 8px var(--green)}
.glow-p{text-shadow:0 0 8px var(--purple)}

/* skill bars */
.srow{display:flex;align-items:center;gap:.8rem;margin:.15rem 0}
.sn{width:130px;color:var(--white);flex-shrink:0;font-size:13px}
.st{height:5px;background:var(--dim);flex:1;max-width:180px;border-radius:2px;overflow:hidden}
.sf{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:2px}
.sp{color:var(--cyan);font-size:12px;width:32px;text-align:right}

/* links */
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline;text-shadow:0 0 6px var(--cyan)}

/* scrollbar */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--dim);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--purple)}

/* ascii art */
.ascii{white-space:pre;font-size:11px;line-height:1.15;color:var(--cyan)}

/* mobile */
@media(max-width:600px){
  body{font-size:12px}
  #app{padding:1rem .75rem}
  .ascii{font-size:7.5px}
  .sn{width:90px}
  .st{max-width:110px}
}