/* Basic site styles (light mode) */
:root{
  --bg: #f9fafb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #3b82f6;
  --glass: rgba(255,255,255,0.6);
  --radius:10px;
  --base-font-size: 17px; /* change this value to adjust global font size */
}

body{font-size:var(--base-font-size);}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color:#111827;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
header{padding:24px 32px;background:var(--glass);backdrop-filter:blur(4px)}
header h1{margin:0;font-size:20px}
header nav{margin-top:8px}
header a{color:var(--muted);text-decoration:none;margin-right:12px}
main{max-width:1100px;margin:28px auto;padding:24px;background:#ffffff;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,0.1)}
h1{color:#111827}
p,li{color:var(#111827)}
a{color:var(--accent)}
footer{padding:18px 32px;color:var(--muted);text-align:center}

/* Layout: content + sidebar */
.layout{display:flex;gap:28px;align-items:flex-start}
.content-area{flex:1;min-width:0}
.sidebar{width:320px;flex-shrink:0}
.card{background:var(--glass);padding:16px;border-radius:8px;margin-bottom:16px;border:1px solid var(--muted)}
.page-title{margin:0 0 12px 0;font-size:28px;color:#111827}
.hero{padding:18px;border-radius:8px;background:linear-gradient(90deg, rgba(59,130,246,0.15), rgba(59,130,246,0.05));margin-bottom:20px}
.hero-title{margin:0 0 8px 0;font-size:22px}
.hero-desc{color:var(--muted);margin:0}
.post-list{display:flex;flex-direction:column;gap:18px}
.post-item{padding:16px;border-radius:8px;background:#f3f4f6;box-shadow:0 1px 2px rgba(0,0,0,0.05);border:1px solid #e5e7eb}
.post-item h3{margin:0 0 6px 0}
.post-item .excerpt{color:var(--muted);margin:8px 0}
.read-more{font-weight:600}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag{background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:6px;color:var(--muted);text-decoration:none}
.muted{color:var(--muted)}

@media (max-width:960px){.layout{flex-direction:column}.sidebar{width:100%}}
@media (max-width:600px){main{margin:16px;padding:16px}}

/* code blocks: dark background, white text */
pre, code {
  background: #1e1e1e;
  color: #f8f8f2;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  overflow-x: auto;
}
pre { padding: 1em; }

/* code copy button */
.code-container{position:relative}
.copy-btn{position:absolute;top:8px;right:8px;padding:4px 8px;font-size:0.75rem;border:none;border-radius:4px;background:var(--accent);color:#fff;cursor:button;opacity:0.8}
.copy-btn:hover{opacity:1}
.copy-btn:active{transform:scale(0.95)}