:root{
  --bg:#0e0e11;
  --fg:#e8e8ea;
  --muted:#9a9aa2;
  --border:#222;
  --max-width:720px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"dm sans",system-ui,-apple-system,"segoe ui",roboto,arial;
}

main{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:18px 20px 24px;
}

h1,h2,h3{
  font-family:"inter tight",system-ui;
  letter-spacing:-0.02em;
  margin:0;
}

h1{font-size:1.6rem;margin-bottom:6px}

p{
  line-height:1.65;
  color:var(--muted);
  margin:6px 0 0;
}

/* links never change color */
a,
a:visited,
a:hover,
a:active{
  color:var(--fg);
  text-decoration:none;
}

/* blog list */
.blog-list{margin-top:12px;display:flex;flex-direction:column;gap:14px}
.blog-item{border-bottom:1px solid var(--border);padding:12px 0}
.blog-item h3{font-size:1.05rem;margin-bottom:6px}
.meta{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.blog-item p{font-size:.95rem;margin-bottom:6px}
.blog-item .tags{font-size:.82rem;color:var(--muted)}

/* inputs */
input{
  width:100%;
  padding:9px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--fg);
  font-family:inherit;
  font-size:.95rem;
}

/* light mode */
.light{
  --bg:#ffffff;
  --fg:#111;
  --muted:#666;
  --border:#e6e6e6;
}

/* window shadow adapts */
.window{
  background:var(--bg);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}