:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --accent: #0f62fe;
  --container: 1100px;
}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.theme-dark{
  --bg: #0b1020;
  --text: #e6eef8;
  --muted: #9aa6b2;
  --accent: #7dd3fc;
}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:1rem;
}
.site-header{
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:linear-gradient(0deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{margin:0;font-size:1.2rem;}
.main-nav{display:flex;gap:0.25rem;align-items:center;}
.nav-btn{background:none;border:0;padding:0.5rem 0.7rem;cursor:pointer;border-radius:6px;}
.nav-btn.active{background:rgba(0,0,0,0.06);}
.theme-toggle{border:1px solid rgba(0,0,0,0.08);padding:0.4rem 0.6rem;border-radius:6px;cursor:pointer;}

.page{display:none;padding:1.5rem 0;}
.page.active{display:block;}

.ctf-layout{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:1rem;
}
.ctf-sidebar{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:8px;
  padding:0.5rem;
  height:60vh;
  overflow:auto;
  background:rgba(0,0,0,0.02);
}
.search{width:100%;padding:0.4rem;margin-bottom:0.4rem;border-radius:6px;border:1px solid #ddd;}
.writeup-list{list-style:none;padding:0;margin:0;}
.writeup-list li{padding:0.5rem;border-radius:6px;cursor:pointer;}
.writeup-list li:hover{background:rgba(0,0,0,0.04);}

.ctf-terminal{
  display:flex;
  flex-direction:column;
  height:60vh;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
.terminal-header{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 0.75rem;
  background:linear-gradient(90deg, rgba(40,40,40,0.98), rgba(30,30,30,0.98));
  color:#ddd;
}
.term-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.term-dot.red{background:#ff5f56;}
.term-dot.yellow{background:#ffbd2e;}
.term-dot.green{background:#27c93f;}
.term-title{flex:1;text-align:center;font-family:monospace;font-size:0.9rem;}
#downloadMd{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#ddd;padding:0.25rem 0.5rem;border-radius:6px;cursor:pointer;}

.terminal-content{
  background:#000;
  color:#00ff66;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-size:0.92rem;
  line-height:1.45;
  padding:1rem;
  overflow:auto;
  flex:1;
  white-space:pre-wrap;
}

/* make code blocks inside rendered markdown look good and green on black */
.terminal-content h1,
.terminal-content h2,
.terminal-content h3{
  color:#a8ff9a;
}
.terminal-content code{
  background:transparent;
  color:#7fffd4;
}
.terminal-content pre{
  background:transparent;
  border:0;
  color:#00ff66;
}

/* responsive */
@media (max-width:900px){
  .ctf-layout{grid-template-columns:1fr;grid-auto-rows:auto;}
  .ctf-sidebar{height:160px;}
  .ctf-terminal{height:50vh;}
}