:root{
  --bg:#0b0b10; --panel:#131320; --ink:#e9e9f1; --muted:#a7a7bd; --accent:#9ae6b4; --line:#22223a;
}

html,body{
  background:var(--bg); color:var(--ink); margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  line-height:1.65
}

.wrap{max-width:960px; margin:auto; padding:32px 20px}
header{margin-bottom:24px}

h1{font-size: clamp(1.6rem, 3vw, 2.2rem); margin:0 0 8px 0}
h2{font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin:32px 0 12px}
h3{font-size:1.05rem; margin:20px 0 10px; color:var(--accent)}

p, li{color:var(--ink)}
a{color:#8ecaff; text-decoration: none}
a:hover{text-decoration: underline}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 18px}
.grid{display:grid; gap:14px}
@media (min-width:780px){ .grid-2{grid-template-columns:1fr 1fr} }

.tag{display:inline-block; border:1px solid var(--line); padding:2px 8px; border-radius:999px; font-size:.8rem; color:var(--muted)}
blockquote{border-left:4px solid var(--accent); margin:14px 0; padding:10px 14px; background:#0f0f1a; color:var(--ink)}
.meta{color:var(--muted); font-size:.95rem}
ul{margin:8px 0 8px 20px}
ol{margin:8px 0 8px 20px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px}
.dim{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.dim .tag{background:#0f0f1a}
.note{color:var(--muted); font-size:.92rem}

.video{aspect-ratio:16/9; width:100%; border:1px solid var(--line); border-radius:12px; overflow:hidden}
iframe{width:100%; height:100%; border:0}