:root{
  --bg:#0d1117; --bg2:#161b22; --frame:#30363d; --muted:#8b949e;
  --green:#39d353; --green-dim:#146c37; --cyan:#58a6ff; --white:#e6edf3;
  --red:#ff5f56; --yellow:#ffbd2e; --pink:#f778ba;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--white);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:24px 14px 60px;}
a{color:var(--cyan);text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{width:100%;max-width:900px;}

.hero{text-align:center;margin-bottom:22px;}
.hero pre{font-size:clamp(6px,1.6vw,13px);line-height:1.15;color:#58a6ff;
  margin:0 0 6px;white-space:pre;overflow-x:auto;}
.hero .tagline{color:var(--muted);font-size:14px;}
.hero img{width:min(260px,60vw);border-radius:10px;border:1px solid var(--frame);margin-top:14px;}

.window{background:var(--bg);border:1px solid var(--frame);border-radius:10px;
  overflow:hidden;box-shadow:0 20px 60px -20px rgba(0,0,0,.6);}
.titlebar{display:flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--bg2);border-bottom:1px solid var(--frame);position:relative;}
.dot{width:11px;height:11px;border-radius:50%;}
.titlebar .label{position:absolute;left:0;right:0;text-align:center;color:var(--muted);font-size:12px;}

.term{padding:16px;min-height:360px;max-height:60vh;overflow-y:auto;font-size:13.5px;line-height:1.55;}
.term .line{white-space:pre-wrap;word-break:break-word;}
.term .prompt-line{display:flex;gap:8px;}
.term .prompt-tag{color:#58a6ff;flex-shrink:0;}
.out-cmd{color:var(--cyan);}
.out-dim{color:var(--muted);}
.out-green{color:var(--green);}
.out-white{color:var(--white);}
.out-yellow{color:var(--yellow);}
.out-cyan{color:#58a6ff;}

.inputRow{display:flex;gap:8px;align-items:center;padding:0 16px 16px;}
.inputRow .prompt-tag{color:#58a6ff;}
#cmdInput{flex:1;background:transparent;border:none;outline:none;color:var(--white);
  font-family:inherit;font-size:13.5px;caret-color:#58a6ff;}
.cursor{display:inline-block;width:8px;height:15px;background:#58a6ff;
  animation:blink 1s steps(1) infinite;vertical-align:middle;}
@keyframes blink{50%{opacity:0;}}

.hint{text-align:center;color:var(--muted);font-size:12px;margin-top:10px;}
.hint kbd{background:var(--bg2);border:1px solid var(--frame);border-radius:4px;
  padding:1px 6px;color:var(--white);}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin:18px 0;}
.stat{border:1px solid var(--frame);border-radius:8px;padding:12px;background:var(--bg2);}
.stat .num{font-size:22px;color:#58a6ff;font-weight:600;}
.stat .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}

/* heatmap */
.heatmap-wrap{overflow-x:auto;padding:4px 0;}
.heatmap{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,10px);gap:2px;}
.cell{width:10px;height:10px;border-radius:2px;cursor:pointer;transition:transform .08s;}
.cell:hover{transform:scale(1.6);outline:1px solid var(--white);}
.legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:8px;}
.legend .cell{cursor:default;}
.legend .cell:hover{transform:none;outline:none;}
#tooltip{position:fixed;pointer-events:none;background:#1c2128;border:1px solid var(--frame);
  color:var(--white);font-size:11.5px;padding:4px 8px;border-radius:6px;display:none;z-index:50;
  box-shadow:0 8px 20px rgba(0,0,0,.5);}

footer{margin-top:26px;text-align:center;color:var(--muted);font-size:12px;}
footer .links{margin-bottom:8px;}
footer .links a{margin:0 8px; color:var(--pink);}
footer .links a:hover{color:#ff9ec8;}

@media (max-width:520px){
  .term{font-size:12.5px;}
  .hero pre{font-size:6px;}
}