@font-face{font-family:"Ubuntu Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ubuntu-mono-400.woff2") format("woff2")}
@font-face{font-family:"Ubuntu Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/ubuntu-mono-700.woff2") format("woff2")}
:root{
  --bg:#0b0b0c; --fg:#c6c6c8; --muted:#7a7a7d;
  --accent:#e5484d;   /* red: links, rules, markers */
  --head:#ededf0;     /* headings (bright) */
  --icode:#ff8a8a;    /* inline code */
  --strong:#f4f4f6;   /* bold */
  --border:#232326; --code-bg:#141416;
  --mono: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="light"]{
  --bg:#fbfaf9; --fg:#232326; --muted:#6a6a6e;
  --accent:#cf222e; --head:#17171a; --icode:#b31d28; --strong:#0f0f12;
  --border:#e6e4e2; --code-bg:#f4f2f0;
}
*{box-sizing:border-box}
html{font-size:20px}
body{
  margin:0 auto; max-width:1160px; padding:2.2rem 1.6rem 4.5rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1.05rem; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0; border-top:1px solid var(--border); margin:1.4rem 0}
strong,b{color:var(--strong); font-weight:700}

/* header / chrome (monospace) */
header.site{display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:.95rem}
header.site .brand{letter-spacing:.01em}
header.site .brand .name{color:var(--head); font-weight:700}
header.site .brand .tag{color:var(--muted)}
header.site .brand .cursor{color:var(--accent); font-weight:700; margin-left:.12rem; animation:blink 1.15s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
header.site nav{display:flex; gap:1.25rem; align-items:center}
header.site nav a{color:var(--muted)}
header.site nav a:hover{color:var(--accent)}
header.site nav .social{display:inline-flex; gap:.9rem; align-items:center; margin-left:-.2rem; padding-left:1.1rem; border-left:1px solid var(--border)}
header.site nav .social a{color:var(--muted); display:inline-flex}
header.site nav .social a:hover{color:var(--accent)}
header.site nav .social svg{width:17px; height:17px; fill:currentColor; display:block; transition:transform .12s ease}
header.site nav .social a:hover svg{transform:translateY(-1px)}
.lede{font-family:var(--mono); color:var(--muted); font-size:1rem; margin:.1rem 0 1.9rem}

/* about card */
.about{text-align:center; max-width:560px; margin:1.8rem auto 0}
.about .avatar{width:140px; height:140px; border-radius:50%; object-fit:cover; border:3px solid var(--accent); padding:4px; background:var(--bg); display:block; margin:0 auto 1.1rem}
.about .name{font-family:var(--sans); color:var(--strong); font-size:1.95rem; font-weight:800; letter-spacing:-.01em; margin:.2rem 0 .15rem; border:0; padding:0}
.about .sub{font-family:var(--mono); color:var(--muted); font-size:1rem; margin:0 0 .3rem}
.about .sub sup{color:var(--accent); font-weight:700}
.about .note{font-family:var(--mono); color:var(--muted); font-size:.8rem; opacity:.85; margin:0 0 1.6rem}
.about .certs{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; padding:0; margin:0 0 1.6rem}
.about .certs li{font-family:var(--mono); font-size:.82rem; color:var(--strong); border:1px solid var(--border); border-radius:999px; padding:.3rem .85rem; background:var(--code-bg)}
.about .bio{color:var(--fg); font-size:1.05rem; line-height:1.7; margin:0 auto 1.8rem; max-width:50ch}
.about .social{display:inline-flex; gap:1.4rem; align-items:center; justify-content:center}
.about .social a{color:var(--muted); display:inline-flex}
.about .social a:hover{color:var(--accent)}
.about .social svg{width:22px; height:22px; fill:currentColor; display:block; transition:transform .12s ease}
.about .social a:hover svg{transform:translateY(-2px)}
#theme-toggle{background:none; border:1px solid var(--border); color:var(--muted); font-family:var(--mono); font-size:.84rem; cursor:pointer; padding:.18rem .6rem; border-radius:4px}
#theme-toggle:hover{color:var(--accent); border-color:var(--accent)}

/* post list (directory-listing vibe) */
ul.postlist{list-style:none; padding:0; margin:1.4rem 0; font-size:1.05rem}
ul.postlist li{display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; padding:.75rem 0; align-items:baseline; border-bottom:1px solid var(--border)}
ul.postlist .date{color:var(--muted); font-family:var(--mono); font-size:.92rem; white-space:nowrap}
ul.postlist a{color:var(--head); font-weight:600}
ul.postlist a:hover{color:var(--accent)}
ul.postlist .tags{color:var(--muted); font-family:var(--mono); font-size:.85rem}

/* headings: bright, red section rule */
h1{font-family:var(--sans); color:var(--strong); font-size:1.95rem; font-weight:800; line-height:1.18; margin:.3rem 0 .7rem; letter-spacing:-.02em}
.meta{font-family:var(--mono); color:var(--muted); font-size:.9rem; margin:0 0 2.2rem}

article.post{font-size:1rem; line-height:1.7}
article.post h2{font-family:var(--sans); color:var(--head); font-size:1.42rem; font-weight:700; line-height:1.25; margin:2.6rem 0 .8rem; padding-bottom:.35rem; border-bottom:2px solid var(--accent)}
article.post h3{font-family:var(--sans); color:var(--head); font-size:1.16rem; font-weight:700; margin:1.9rem 0 .55rem}
article.post h3::before{content:"# "; color:var(--accent); font-family:var(--mono)}
article.post p{margin:0 0 1.3rem}
article.post ul, article.post ol{margin:0 0 1.3rem; padding-left:1.5rem}
article.post li{margin:.4rem 0}
article.post li::marker{color:var(--accent)}

/* generic page headings */
h2{font-family:var(--sans); color:var(--head); font-size:1.2rem; margin:2rem 0 .6rem; font-weight:700}

blockquote{margin:1.6rem 0; padding:.9rem 1.2rem; border-left:3px solid var(--accent); background:var(--code-bg); color:var(--fg); border-radius:0 6px 6px 0; font-size:1.05rem}
blockquote p{margin:.3rem 0}
article.post img{display:block; max-width:min(100%, 340px); height:auto; margin:1.4rem auto; border-radius:8px; border:1px solid var(--border)}

code{font-family:var(--mono); font-size:.86em; color:var(--icode); background:var(--code-bg); padding:.13rem .42rem; border-radius:4px}
pre{background:var(--code-bg); border:1px solid var(--border); border-radius:7px; padding:1.1rem 1.2rem; overflow-x:auto; margin:1.5rem 0}
pre code{color:var(--fg); background:none; padding:0; font-size:.95rem; line-height:1.6}

table{border-collapse:collapse; width:100%; font-size:1rem; margin:1.6rem 0; display:block; overflow-x:auto}
th,td{border:1px solid var(--border); padding:.6rem .8rem; text-align:left; vertical-align:top}
th{color:var(--strong); font-weight:700; background:var(--code-bg)}
tr:nth-child(even) td{background:var(--code-bg)}
.back{font-family:var(--mono); font-size:1rem; margin-top:2.6rem}

footer{display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:space-between; align-items:center; font-family:var(--mono); color:var(--muted); font-size:.84rem}
footer .social{display:inline-flex; gap:1rem; align-items:center}
footer .social a{color:var(--muted); display:inline-flex}
footer .social a:hover{color:var(--accent)}
footer .social svg{width:19px; height:19px; fill:currentColor; display:block}
::selection{background:var(--accent); color:#fff}

/* syntax highlighting (rouge) - warm palette */
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs{color:var(--muted); font-style:italic}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .o, .highlight .ow, .highlight .nt{color:#ff6b6b}
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .se, .highlight .sx, .highlight .dl{color:#e3b341}
.highlight .nb, .highlight .bp, .highlight .nv, .highlight .vg, .highlight .vi, .highlight .na, .highlight .nl, .highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .il{color:#ff9e64}
.highlight .nf, .highlight .nd, .highlight .fm{color:#e6b8b8}
.highlight .err{color:inherit; background:none}
:root[data-theme="light"] .highlight .k, :root[data-theme="light"] .highlight .kd, :root[data-theme="light"] .highlight .kn, :root[data-theme="light"] .highlight .kp, :root[data-theme="light"] .highlight .kr, :root[data-theme="light"] .highlight .kt, :root[data-theme="light"] .highlight .o, :root[data-theme="light"] .highlight .ow, :root[data-theme="light"] .highlight .nt{color:#cf222e}
:root[data-theme="light"] .highlight .s, :root[data-theme="light"] .highlight .s1, :root[data-theme="light"] .highlight .s2, :root[data-theme="light"] .highlight .sb, :root[data-theme="light"] .highlight .dl{color:#9a6700}
:root[data-theme="light"] .highlight .nb, :root[data-theme="light"] .highlight .bp, :root[data-theme="light"] .highlight .nv, :root[data-theme="light"] .highlight .vg, :root[data-theme="light"] .highlight .na, :root[data-theme="light"] .highlight .m, :root[data-theme="light"] .highlight .mi{color:#b35900}
:root[data-theme="light"] .highlight .nf, :root[data-theme="light"] .highlight .nd, :root[data-theme="light"] .highlight .fm{color:#b31d28}

/* mobile */
@media (max-width:640px){
  html{font-size:18px}
  body{padding:1.5rem 1.05rem 3rem}
  h1{font-size:1.85rem}
  article.post{font-size:1.06rem; line-height:1.72}
  article.post h2{font-size:1.36rem; margin-top:2.4rem}
  article.post h3{font-size:1.18rem}
  header.site{font-size:.9rem; gap:.45rem .9rem}
  header.site nav{gap:1rem}
  pre{padding:.85rem .9rem; border-radius:6px}
  blockquote{padding:.75rem .95rem}
}