:root { --bg:#0d1117; --panel:#161b22; --line:#30363d; --text:#c9d1d9; --dim:#8b949e; --amber:#f0b95a; --teal:#56d4c8; --green:#7ee787; --blue:#79c0ff;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.7 var(--mono); }
a { color:var(--blue); text-decoration:none; border-bottom:1px dotted var(--blue); }
a:hover { background:rgb(121 192 255 / .15); }
.wrap { max-width: 820px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

nav { position:sticky; top:0; z-index:5; background:rgb(13 17 23 / .9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:.6rem 1.25rem; font-size:.85rem; display:flex; gap:1.25rem; overflow-x:auto; white-space:nowrap; }
nav a { border:0; color:var(--dim); } nav a:hover { color:#fff; background:none; }
nav .me { color:var(--green); margin-right:auto; }

.win { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgb(0 0 0 / .5); margin-bottom:2rem; }
.chrome { display:flex; gap:.5rem; align-items:center; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:#1c2128; color:var(--dim); font-size:.8rem; }
.chrome i { width:12px; height:12px; border-radius:50%; background:#ff5f57; display:inline-block; }
.chrome i:nth-child(2) { background:#febc2e } .chrome i:nth-child(3) { background:#28c840 }
.chrome span { margin-left:.75rem; }
.body { padding: 1.5rem 1.5rem 1.75rem; }

.p { color:var(--green); white-space:nowrap; } .p b { color:var(--amber); font-weight:400; } .cmd { color:#fff; }
.out { margin:.5rem 0 0; } .c { color:var(--dim); } .k { color:var(--teal); }
h1 { font-size:clamp(1.7rem, 5.5vw, 2.6rem); margin:.5rem 0 .25rem; color:#fff; letter-spacing:-.02em; line-height:1.15; }
h1 em { color:var(--amber); font-style:normal; }

/* post list */
.posts { list-style:none; margin:.75rem 0 0; padding:0; }
[hidden] { display:none !important; }
.posts > li { display:grid; grid-template-columns: 11ch 1fr; gap:.25rem 1.5rem; padding:.9rem 0; border-top:1px dashed var(--line); }
.posts > li:first-of-type { border-top:0; }
.posts time { color:var(--amber); font-size:.85rem; padding-top:.2rem; }
.posts h2 { font-size:1.1rem; margin:0; color:#fff; font-weight:600; }
.posts h2 a { color:#fff; border:0; } .posts h2 a:hover { color:var(--amber); background:none; }
.posts p { margin:.2rem 0 0; color:var(--dim); font-size:.9rem; }
.tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0; padding:0; list-style:none; }
.tags li { border:1px solid var(--line); border-radius:6px; padding:0 .55rem; font-size:.78rem; color:var(--dim); }
.tags li::before { content:"#"; color:var(--amber); }
.tags li a { color:inherit; border:0; }
.tags li:hover { border-color:var(--amber); }
.tags li:hover a { background:none; color:#fff; }

/* filters: compact rows inside the posts window */
.filters { margin:.9rem 0 .25rem; padding:.7rem 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.frow { display:flex; align-items:baseline; gap:1rem; margin:.3rem 0; }
.flabel { flex:0 0 5.5ch; color:var(--dim); font-size:.85rem; }
.fchips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip { display:inline-block; border:1px solid var(--line); border-radius:6px; padding:0 .6rem; font-size:.85rem; color:var(--dim); }
.chip:hover { color:#fff; border-color:var(--amber); background:none; }
.chip[aria-current] { color:var(--amber); border-color:var(--amber); }
.chip b { font-weight:400; opacity:.7; }
.status { margin:.6rem 0 0; color:var(--dim); font-size:.9rem; }

/* article */
.meta { color:var(--dim); font-size:.85rem; margin:0 0 1.5rem; }
article { font-size:1rem; line-height:1.8; }
article h2 { color:#fff; font-size:1.25rem; margin:2rem 0 .5rem; }
article h2::before { content:"## "; color:var(--amber); }
article h3 { color:#fff; font-size:1.05rem; margin:1.5rem 0 .25rem; }
article h3::before { content:"### "; color:var(--amber); }
article p { margin:0 0 1rem; }
article ul, article ol { padding-left:1.5rem; margin:0 0 1rem; }
article blockquote { margin:1rem 0; padding:.25rem 1rem; border-left:3px solid var(--amber); color:var(--dim); }
article code { background:#1c2128; border:1px solid var(--line); border-radius:4px; padding:.05rem .35rem; font-size:.92em; color:var(--green); }
article pre { background:#0d1117; border:1px solid var(--line); border-radius:8px; padding:1rem; overflow-x:auto; line-height:1.55; font-size:.9rem; margin:0 0 1rem; }
article pre code { background:none; border:0; padding:0; color:var(--text); }
article img { max-width:100%; height:auto; border-radius:8px; border:1px solid var(--line); }
article hr { border:0; border-top:1px dashed var(--line); margin:2rem 0; }
article table { display:block; overflow-x:auto; border-collapse:collapse; margin:0 0 1rem; font-size:.92rem; }
article th, article td { border:1px solid var(--line); padding:.4rem .75rem; text-align:left; }
article th { color:#fff; background:#1c2128; }
article li > p { margin:0; }
article .footnotes { margin-top:2rem; padding-top:1rem; border-top:1px dashed var(--line); font-size:.9rem; color:var(--dim); }

/* Syntax highlighting (Rouge) */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs, .highlight .cp { color:#8b949e; font-style:italic; }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .o, .highlight .ow { color:#ff7b72; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sr, .highlight .ss, .highlight .sx { color:#a5d6ff; }
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il, .highlight .no, .highlight .nv, .highlight .vi, .highlight .vc { color:#79c0ff; }
.highlight .nf, .highlight .nc, .highlight .nn, .highlight .nd, .highlight .fm { color:#d2a8ff; }
.highlight .nb, .highlight .bp, .highlight .ne { color:#ffa657; }
.highlight .na, .highlight .nt, .highlight .nl { color:#7ee787; }
.highlight .gd { color:#ffa198; } .highlight .gi { color:#7ee787; } .highlight .err { color:#ffa198; }
.back { margin-top:1.5rem; }
.meta a { color:var(--dim); border-bottom-color:var(--line); }
.meta a:hover { color:var(--amber); }
.meta .tag-link { color:var(--teal); border:0; }
.pager { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2rem 0 0; padding:1rem 0 0; border-top:1px dashed var(--line); }
.pager a { color:#fff; border:0; padding:.6rem .8rem; border:1px solid var(--line); border-radius:8px; font-size:.9rem; line-height:1.4; }
.pager a:hover { border-color:var(--amber); background:none; }
.pager a[rel="prev"] { grid-column:2; text-align:right; }
.pager a[rel="next"] { grid-column:1; }

.cursor { display:inline-block; width:.6ch; height:1.1em; background:var(--green); vertical-align:text-bottom; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0 } }
footer { color:var(--dim); text-align:center; font-size:.8rem; }

@media (max-width:560px) {
  .posts > li { grid-template-columns:1fr; }
  .frow { flex-direction:column; gap:.2rem; }
  .flabel { flex:none; }
  nav .me { display:none; }
  .body { padding:1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .cursor { animation:none } }