:root{
  --bg:#0b0d10; --panel:#11151a; --text:#e7e9ea; --soft:#cdd3d8;
  --muted:#7d868e; --line:#1c2127; --accent:#7cc4ff; --accent2:#9b8cff;
}
:root[data-theme="light"]{
  --bg:#f6f7f9; --panel:#ffffff; --text:#0b0d10; --soft:#2b3138;
  --muted:#6b747c; --line:#e4e8ec; --accent:#1a73e8; --accent2:#6b4dff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:18px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:background .4s,color .4s;
}
.wrap{max-width:720px;margin:0 auto;padding:34px 24px 100px}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:.92rem;margin-bottom:30px}
.back:hover{color:var(--accent)}
h1{font-size:2.15rem;line-height:1.15;letter-spacing:-.02em;margin:0 0 8px}
.meta{color:var(--muted);font-size:.9rem;margin:0 0 34px}
article h2{font-size:1.4rem;letter-spacing:-.01em;margin:42px 0 12px}
article h3{font-size:1.12rem;margin:30px 0 8px}
article p{color:var(--soft);margin:0 0 18px}
article ul,article ol{color:var(--soft);padding-left:1.2em;margin:0 0 18px}
article li{margin:8px 0}
article strong{color:var(--text)}
article em{color:var(--soft)}
article a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
article a:hover{border-bottom-color:var(--accent)}
article hr{border:none;border-top:1px solid var(--line);margin:40px 0}
article code{font:0.9em ui-monospace,Menlo,monospace;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:.1em .4em}
footer{margin-top:46px;border-top:1px solid var(--line);padding-top:22px;color:var(--muted);font-size:.92rem}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .links{margin:6px 0}
footer .more{margin-top:14px}
/* index list */
.cardlist{display:grid;gap:14px;margin-top:26px}
a.card{display:block;border:1px solid var(--line);background:var(--panel);
  border-radius:14px;padding:18px 20px;text-decoration:none;transition:.18s;color:inherit}
a.card:hover{border-color:var(--accent);transform:translateY(-1px)}
a.card h3{margin:0 0 6px;font-size:1.08rem;color:var(--text)}
a.card p{margin:0;color:var(--soft);font-size:.95rem;line-height:1.5}
a.card .when{display:block;margin-top:9px;color:var(--muted);font-size:.78rem;letter-spacing:.02em}
h2.grp{font-size:1.18rem;letter-spacing:-.01em;margin:46px 0 14px;display:flex;align-items:baseline;gap:10px}
h2.grp span{font-size:.8rem;color:var(--muted);font-weight:500;border:1px solid var(--line);
  border-radius:999px;padding:2px 9px}
@media(max-width:560px){h1{font-size:1.7rem}body{font-size:17px}}