:root {
  --bg: #191919;
  --fg: #999;
  --page-bg: #262626;
  --accent: #8DB0DE;
  --visited: #B9A07C;
  --highlight: #B194DE;
  --title: #7B9DCC;
  --text-taxo: #6A6A6A;
  --text-dim: #777777;
  --hr: #333333;
  --max-width: 1440px;
  --line-height: 1.7;
  --font-size: 18px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Lucida Console, Consolas, Courier New;
  background: var(--bg);
  color: var(--fg);
}

.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px 16px;
}

.reader {
  background: var(--page-bg);
  max-width: var(--max-width);
  width: 100%;
  padding: 32px 24px 40px;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.reader-header {
    background: var(--bg);
    border-radius: 2px;
    color: var(--title);
    padding: 20px;
    text-align: center;
    width: 100%;
}

.reader-footer {
    bottom: 0;
    color: var(--text-dim);
    left: 0;
    margin-top: 70px;
    padding-bottom: 10px;
    text-align: left;
    width: 100%;
}

.reader-image {
  width: 100%;
  text-align: center;
  padding: 2.1em 0 0 0;
}

.reader-title {
  margin: 0 0 0px;
  font-size: 1.8rem;
  line-height: 1.5;
}

.reader-taxo {
  font-size: 0.9rem;
  margin: 0 0 1.1em;
  color: var(--text-taxo);
}

.reader-content {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

.reader-content p {
  margin: 0 0 1.1em;
}

.reader-content h2, .reader-content h3 {
  margin: 1.6em 0 0.6em;
  line-height: 1.3;
}

.reader-content a {
  color: var(--accent);
  text-decoration: none;
}

.reader-content a:hover {
  color: var(--highlight);
  text-decoration: underline;
}

.reader-content a:visited {
  color: var(--visited);
  text-decoration: underline;
}

.reader-content blockquote {
  margin: 1.4em 0;
  padding-left: 1em;
  border-left: 3px solid #ddd;
  color: #555;
  font-style: italic;
}

.reader-content ul, .reader-content ol {
  padding-left: 1.4em;
  margin: 0 0 1.1em;
  list-style-type: square;
}

.reader-content hr {
  border: 1px solid var(--hr);
}

@media (max-width: 600px) {
  :root {
    --font-size: 16px;
  }
  .reader {
    padding: 24px 18px 32px;
    border-radius: 0.75rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  }
}