:root {
  --bg-color: #0b0d10;
  --panel-bg: rgba(255,255,255,0.05);
  --panel-border: rgba(255,255,255,0.1);
  --accent: #c0c0c0;
  --radius: 16px;
  --maxw: min(1000px, 95vw);
  --btn-bg: rgba(255,255,255,0.05);
  --btn-hover: rgba(255,255,255,0.08);
  --text-shadow: 1px 1px 6px rgba(0,0,0,0.7);
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: system-ui, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-color);
  color: #e6eef1;
  padding: 32px;
  display:flex;
  justify-content:center;
  min-height: 100vh;
  text-shadow: var(--text-shadow);
}

.wrap {
  width:100%;
  max-width: var(--maxw);
  position: relative;
  z-index:1;
}

nav.article-nav {
  display:flex;
  gap:12px;
  margin-bottom:24px;
}

nav.article-nav a {
  text-decoration:none;
  padding:8px 14px;
  border-radius:12px;
  background: var(--btn-bg);
  color: var(--accent);
  border:1px solid rgba(192,192,192,0.1);
  transition: background 0.2s;
  font-size:0.95rem;
}

nav.article-nav a:hover {
  background: var(--btn-hover);
}

article.card {
  background: var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 32px;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

article.card h1, article.card h2, article.card h3, article.card h4, article.card p, article.card a, article.card li, article.card blockquote {
  text-shadow: var(--text-shadow);
}

article.card h1 { font-size: 2rem; margin-bottom: 12px; }
article.card p.subtitle { color: #9aa3ad; margin-bottom: 24px; }

article.card img { max-width: 100%; border-radius: var(--radius); margin: 16px 0; }
article.card a { color: #b0b0b0; text-decoration: underline; }
article.card a:hover { color: #ffffff; }

article.card h2, article.card h3, article.card h4 { margin: 20px 0 8px; }
article.card ul, article.card ol { margin: 12px 0 12px 24px; }
article.card blockquote { border-left: 3px solid #03adfc; padding-left: 12px; margin: 16px 0; color: #c0c0c0; font-style: italic; }

article.card img {
  display: block;
  margin: 16px auto;
  max-width: 80%;
  height: auto;
  border-radius: var(--radius);
  object-fit: contain;
  max-height: 60vh;
}

footer { margin-top: 40px; text-align: center; font-size: 0.85rem; color: #9aa3ad; text-shadow: var(--text-shadow); }

@media(max-width:600px){
  body { padding: 24px; }
  article.card { padding: 24px; }
  article.card h1 { font-size: 1.6rem; }
  nav.article-nav { flex-direction: column; }
}