:root{
  --bg: #0b0f19;
  --paper: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --link: #60a5fa;
  --codeBg: #0b1220;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* STATIC background, no gradients */
body{
  margin:0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height:1.65;
  font-size: 16px;
}

/* Wider desktop layout */
.wrap{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.topbar{
  position: sticky;
  top: 0;
  background: rgba(11,15,25,0.92);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0; /* use wrap padding, not double padding */
}

.brand__title{
  font-weight: 750;
  letter-spacing: 0.3px;
}

.brand__subtitle{
  color: var(--muted);
  font-size: 0.95rem;
}

.topbar__nav a{
  color: var(--muted);
  text-decoration:none;
  margin-left: 14px;
  font-size: 0.95rem;
}
.topbar__nav a:hover{ color: var(--text); }

/* Paper: static, no gradient */
.paper{
  margin: 22px 0 18px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: var(--shadow);
}

.paper__meta{
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 10px;
}

/* Markdown typography */
.paper__content h1,
.paper__content h2,
.paper__content h3{
  line-height:1.25;
  margin: 1.1em 0 0.5em;
}
.paper__content h1{ font-size: 2.1rem; }
.paper__content h2{
  font-size: 1.45rem;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.paper__content h3{ font-size: 1.15rem; color: #e8eefc; }

.paper__content hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.paper__content blockquote{
  margin: 14px 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(96,165,250,0.6);
  background: rgba(96,165,250,0.06);
  border-radius: 10px;
  color: var(--text);
}

.paper__content p{ margin: 0.75em 0; }
.paper__content ul{ padding-left: 1.2em; }
.paper__content li{ margin: 0.35em 0; }
.paper__content a{ color: var(--link); }
.paper__content a:hover{ text-decoration: underline; }

.paper__content code{
  font-family: var(--mono);
  font-size: 0.95em;
  background: var(--codeBg);
  padding: 0.15em 0.35em;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.paper__content pre{
  background: var(--codeBg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  overflow: auto;
}
.paper__content pre code{
  background: transparent;
  border: none;
  padding: 0;
}

.footer{
  color: var(--muted);
  font-size: 0.95rem;
  padding: 10px 0 26px;
}

/* Responsive tweaks */
@media (max-width: 900px){
  .wrap{ padding: 0 18px; }

  .topbar .wrap{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .topbar__nav a{
    margin-left: 0;
    margin-right: 14px;
  }
}

@media (min-width: 1200px){
  body{ font-size: 18px; }
  .paper{ padding: 34px 36px; }
}