:root{
  --bg:#0b0f0c;
  --panel:#07100b;
  --text:#7CFC00;
  --muted:#8fb28f;
  --accent:#66ff99;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#030405 0%, #071112 100%);
  color:var(--text);
  font-family: 'Fira Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.app{display:flex;min-height:100vh}
.sidebar{
  width:250px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-right:1px solid rgba(255,255,255,0.03);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.brand{display:flex;align-items:center;gap:12px}
.dots{display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot.red{background:#ff5f56}
.dot.yellow{background:#ffbd2e}
.dot.green{background:#27c93f}
.logo{font-weight:700;color:var(--accent);text-transform:lowercase}
.nav{display:flex;flex-direction:column;gap:8px}
.nav-btn{background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--text);padding:10px 12px;border-radius:6px;text-align:left;cursor:pointer;font-family:inherit}
.nav-btn.active{background:rgba(102,255,153,0.06);color:var(--accent);border-color:rgba(102,255,153,0.12)}
.sidebar-foot{margin-top:auto;color:var(--muted);font-size:13px}
.content{flex:1;padding:36px;}
.section{display:none;opacity:0;transform:translateY(6px);transition:all .28s ease}
.section.active{display:block;opacity:1;transform:none}
h1,h2{margin:0 0 12px 0}
p,li{color:var(--muted);line-height:1.6}
ul{padding-left:18px;margin:0}

@media (max-width:720px){
  .app{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;align-items:center;padding:12px}
  .nav{flex-direction:row;gap:6px}
  .nav-btn{flex:1;padding:8px}
  .content{padding:18px}
}
.externallinks{margin-top:18px;display:flex;gap:12px;align-items:center}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted);transition:all .16s ease}
.icon-link i{font-size:20px;line-height:1;display:inline-block}
.icon-link:hover{color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 30px rgba(102,255,153,0.06)}

:root{
  --bg:#0b0f0c;
  --panel:#07100b;
  --text:#7CFC00;
  --muted:#8fb28f;
  --accent:#66ff99;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#030405 0%, #071112 100%);
  color:var(--text);
  font-family: 'Fira Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* left-align site content */
  display:block;
  padding:0 24px;
}
.terminal{
  width:min(1000px,94vw);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
  overflow:hidden;
}
.toolbar{height:28px;display:flex;align-items:center;padding:6px 12px;gap:8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.dot{width:12px;height:12px;border-radius:999px;display:inline-block}
.dot.red{background:#ff5f56}
.dot.yellow{background:#ffbd2e}
.dot.green{background:#27c93f}
.screen{
  margin:0;
  padding:20px 24px 18px 24px;
  min-height:260px;
  line-height:1.4;
  font-size:16px;
  background:transparent;
  color:var(--text);
  white-space:pre-wrap;
}
.screen .cmd{color:var(--accent);}
.screen .user{color:#9ad39a;font-weight:600}
.screen .path{color:var(--muted)}
.cursor{display:inline-block; animation:blink 1s steps(1) infinite; color:var(--text); margin-left:2px}
@keyframes blink{50%{opacity:0}}
.commands{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,0.02);background:rgba(0,0,0,0.02)}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--accent);padding:8px 12px;border-radius:6px;cursor:pointer;font-family:inherit}
.btn:hover{box-shadow:0 6px 18px rgba(102,255,153,0.06);transform:translateY(-1px)}
.line{display:block}
.prompt{margin-top:8px}

@media (max-width:520px){
  .screen{font-size:14px;padding:14px}
  .terminal{width:98vw}
  .commands{flex-wrap:wrap}
}