:root{
  --black:#08090b;
  --amber:#ffb000;
  --amber-dim:#a86e00;
  --amber-faint:#5c3d00;
  --red:#ff5f56;
  --yellow:#ffbd2e;
  --green:#27c93f;
  --danger:#ff5c4d;
  --font:'JetBrains Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--black);
  color:var(--amber);
  font-family:var(--font);
  font-size:15px;
  line-height:1.7;
}
::selection{background:var(--amber);color:var(--black);}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.035) 0px,
    rgba(255,255,255,0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:49;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

.terminal{
  max-width:900px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--amber-faint);
  border-right:1px solid var(--amber-faint);
}

.titlebar{
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--amber-faint);
  background:#0c0d10;
  position:sticky;top:0;z-index:5;
}
.dots{display:flex;gap:7px;}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;opacity:0.9;}
.dot.red{background:var(--red);}
.dot.yellow{background:var(--yellow);}
.dot.green{background:var(--green);}
.titlebar-label{font-size:12px;color:var(--amber-dim);flex:1;text-align:center;letter-spacing:0.02em;}
.status{font-size:11px;color:var(--amber-dim);letter-spacing:0.03em;white-space:nowrap;}

.term-body{flex:1;padding:26px 26px 40px;overflow-y:auto;}
.boot{font-size:13px;color:var(--amber-dim);white-space:pre-wrap;margin-bottom:18px;min-height:1em;}
.line{margin-bottom:4px;}
.line .prompt-label{color:var(--amber-dim);} 
.line .typed{color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,0.35);}

.output{margin:8px 0 20px;opacity:0;animation:fadeUp 0.32s ease forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }
.output p{color:#e8dcc0;max-width:68ch;}
.output .lead{color:#f7f1df;font-size:15px;}
.output .hint{color:var(--amber-dim);font-size:12.5px;margin-top:8px;}

.project-list,.social-list,.command-grid,.skill-list{display:flex;flex-direction:column;gap:7px;max-width:680px;}
.project-item,.social-item,.command-item,.skill-item{padding:8px 0;border-bottom:1px solid var(--amber-faint);}
.project-item:last-child,.social-item:last-child,.command-item:last-child,.skill-item:last-child{border-bottom:none;}
.project-item strong,.command-item .cmd,.skill-item strong{display:block;color:var(--amber);margin-bottom:2px;text-shadow:0 0 6px rgba(255,176,0,0.2);}
.project-item span,.command-item .desc,.skill-item span{display:block;color:#e8dcc0;}
.social-item a{display:flex;justify-content:space-between;color:var(--amber);text-decoration:none;padding:3px 0;}
.social-item a:hover{color:#fff;}
.social-item a span:last-child{color:var(--amber-dim);font-size:12.5px;}
.hint-line{color:var(--amber-dim);font-size:12px;margin-top:8px;max-width:68ch;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px;max-width:660px;}
.stat-card{border:1px solid var(--amber-faint);background:rgba(255,176,0,0.04);padding:10px;}
.stat-card strong{display:block;color:#fff;margin-bottom:3px;}
.stat-card span{color:#e8dcc0;font-size:13px;}

.prompt-live{display:flex;align-items:center;gap:8px;margin-top:12px;}
.prompt-label{color:var(--amber-dim);white-space:nowrap;}
.cmd-input{flex:1;background:transparent;border:none;color:var(--amber);font-family:var(--font);font-size:15px;caret-color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,0.35);}
.cmd-input:focus{outline:none;}

.error-text{color:var(--danger);}

@media(max-width:600px){body{font-size:13.5px;} .term-body{padding:18px 16px 30px;} .titlebar-label{display:none;} .status{font-size:10px;} }
@media (prefers-reduced-motion: reduce){.output{animation:none;opacity:1;}}