:root{
  --bg:#0b1120;--bg-soft:#0f172a;--surface:rgba(255,255,255,.035);
  --border:rgba(255,255,255,.09);--border-hi:rgba(56,189,248,.45);
  --accent:#38bdf8;--accent-2:#f0a63c;--text:#f1f5f9;--text-2:#cbd5e1;
  --dim:#94a3b8;--dim-2:#64748b;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.68;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 480px at 18% -6%,rgba(56,189,248,.09),transparent 60%),
                   linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 38%);
  background-repeat:no-repeat;background-attachment:fixed;
}
.wrap{max-width:720px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.crumb{padding:24px 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--dim-2)}
.crumb a{color:var(--dim)}.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.4;margin:0 2px}.crumb b{color:var(--accent);font-weight:600}

.head{padding:14px 0 30px;border-bottom:1px solid var(--border);margin-bottom:8px}
.head h1{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:720;letter-spacing:-.03em}
.lede{margin-top:12px;color:var(--dim);font-size:.95rem;max-width:62ch;
  border-left:2px solid var(--accent-2);padding-left:16px}

.year{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--dim-2);
  margin:30px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.entry{padding:13px 14px;margin:0 -14px;border-radius:10px;border:1px solid transparent;
  transition:background .16s,border-color .16s}
.entry:hover{background:var(--surface);border-color:var(--border)}
.entry .t{font-size:1rem;font-weight:620;color:var(--text);letter-spacing:-.012em}
.entry:hover .t{color:var(--accent)}
.entry time{font-family:var(--mono);font-size:.68rem;color:var(--dim-2);margin-left:10px}
.entry p{margin-top:4px;font-size:.855rem;color:var(--dim)}

.post{padding:16px 0 10px}
.post header{padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--border)}
.post h1{font-size:clamp(1.75rem,4.6vw,2.4rem);font-weight:720;letter-spacing:-.03em;line-height:1.14}
.post header time{display:block;margin-top:12px;font-family:var(--mono);font-size:.72rem;color:var(--dim-2);letter-spacing:.04em}
.tags{margin-top:12px;display:flex;gap:7px;flex-wrap:wrap}
.tags span,.tags a{font-family:var(--mono);font-size:.64rem;color:#7dd3fc;background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.26);border-radius:6px;padding:3px 8px}

.prose{font-size:1.02rem;color:var(--text-2)}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:1.28rem;font-weight:680;color:var(--text);margin:2em 0 .6em;letter-spacing:-.02em}
.prose h3{font-size:1.08rem;font-weight:660;color:var(--text);margin:1.7em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.15em 1.3em}
.prose li{margin-bottom:.4em}
.prose strong{color:var(--text);font-weight:650}
.prose code{font-family:var(--mono);font-size:.86em;background:rgba(255,255,255,.07);
  border:1px solid var(--border);border-radius:5px;padding:1px 6px;color:#bae6fd}
.prose pre{background:#070c16;border:1px solid var(--border);border-radius:10px;
  padding:16px 18px;overflow-x:auto;margin:0 0 1.3em}
.prose pre code{background:none;border:none;padding:0;color:var(--text-2);font-size:.84rem;line-height:1.62}
.prose blockquote{border-left:2px solid var(--accent-2);padding-left:18px;margin:0 0 1.2em;color:var(--dim)}
.prose hr{border:none;border-top:1px solid var(--border);margin:2em 0}
.prose img{max-width:100%;height:auto;border-radius:8px}
.prose figure{margin:1.5em 0;text-align:center}
.prose figure img{display:block;margin:0 auto;width:auto;max-height:560px}
.prose figcaption{margin-top:.5em;font-size:.875em;opacity:.7}
.prose a{text-decoration:underline;text-underline-offset:2px}
.origin{margin-top:30px;padding-top:16px;border-top:1px solid var(--border);
  font-size:.8rem;color:var(--dim-2)}

.pager{display:flex;justify-content:space-between;gap:18px;margin-top:34px;
  padding-top:22px;border-top:1px solid var(--border);font-size:.84rem}
.pager a{color:var(--dim)}.pager a:hover{color:var(--accent)}

footer{margin-top:40px;padding:22px 0 54px;border-top:1px solid var(--border);
  font-size:.79rem;color:var(--dim-2)}
footer a{color:var(--dim)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}