:root{
  --paper:#f3f5f1; --surface:#fbfcf9; --ink:#161a1c; --muted:#59625d;
  --line:#d8ddd5; --accent:#1f7d5c; --accent-soft:rgba(31,125,92,.10);
  --amber:#b5791f;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:44rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0d1012; --surface:#14181a; --ink:#e6ebe5; --muted:#8b948d;
    --line:#232b29; --accent:#4fd0a0; --accent-soft:rgba(79,208,160,.13);
    --amber:#e0a94a;
  }
}
:root[data-theme="light"]{
  --paper:#f3f5f1; --surface:#fbfcf9; --ink:#161a1c; --muted:#59625d;
  --line:#d8ddd5; --accent:#1f7d5c; --accent-soft:rgba(31,125,92,.10); --amber:#b5791f;
}
:root[data-theme="dark"]{
  --paper:#0d1012; --surface:#14181a; --ink:#e6ebe5; --muted:#8b948d;
  --line:#232b29; --accent:#4fd0a0; --accent-soft:rgba(79,208,160,.13); --amber:#e0a94a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:var(--wrap); margin:0 auto; padding:clamp(1.5rem,4vw,3rem) 1.25rem 4rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---- header ---- */
.top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.brand{font-family:var(--mono); font-weight:600; font-size:1.05rem; letter-spacing:.02em}
.brand a{color:var(--ink)}
.brand a:hover{text-decoration:none}
.brand b{color:var(--accent)}
.toggle{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:transparent; border:1px solid var(--line);
  padding:.35rem .6rem; border-radius:5px; cursor:pointer;
}
.toggle:hover{border-color:var(--accent); color:var(--ink)}

.hero{margin-top:clamp(2rem,6vw,3.5rem); border-bottom:1px solid var(--line); padding-bottom:2rem}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:.55rem;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .dot{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
}
h1{font-family:var(--mono); font-weight:600; font-size:clamp(1.7rem,5vw,2.5rem);
   line-height:1.15; letter-spacing:-.01em; margin:.9rem 0 .5rem; text-wrap:balance}
.lede{color:var(--muted); font-size:1.05rem; max-width:34rem; margin:0}

section{margin-top:2.75rem}
.label{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
       color:var(--muted); margin:0 0 1rem}

/* ---- post list ---- */
.post{padding:1.4rem 0; border-bottom:1px solid var(--line); display:grid;
      grid-template-columns:6.5rem 1fr; gap:.2rem 1.4rem}
.post:first-of-type{border-top:1px solid var(--line)}
.post time{font-family:var(--mono); font-size:.76rem; color:var(--muted);
           padding-top:.28rem; font-variant-numeric:tabular-nums}
.post h3{margin:0; font-size:1.12rem; font-weight:650; line-height:1.35}
.post h3 a{color:var(--ink)}
.post h3 a:hover{color:var(--accent); text-decoration:none}
.post p{margin:.35rem 0 .7rem; color:var(--muted); font-size:.95rem}
.tags{display:flex; flex-wrap:wrap; gap:.4rem}
.tag{font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; color:var(--muted);
     background:var(--accent-soft); border:1px solid transparent; padding:.15rem .5rem; border-radius:4px}
.post .meta{grid-column:2}
@media (max-width:34rem){
  .post{grid-template-columns:1fr}
  .post time{padding-top:0}
  .post .meta{grid-column:1}
}

/* ---- article ---- */
.article-head{margin-top:clamp(2rem,6vw,3rem); padding-bottom:1.5rem; border-bottom:1px solid var(--line)}
.article-head h1{font-size:clamp(1.5rem,4vw,2.1rem); margin:.6rem 0 .7rem}
.article-meta{font-family:var(--mono); font-size:.74rem; color:var(--muted);
              display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
              font-variant-numeric:tabular-nums}
.prose{margin-top:2rem}
.prose h2{font-family:var(--mono); font-size:1.05rem; font-weight:600; letter-spacing:.01em;
          margin:2.4rem 0 .8rem; line-height:1.3}
.prose h2::before{content:"// "; color:var(--muted)}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.1rem; padding-left:1.3rem}
.prose li{margin:.35rem 0}
.prose strong{font-weight:650}
.prose code{font-family:var(--mono); font-size:.86em; background:var(--accent-soft);
            padding:.1rem .35rem; border-radius:4px}
.prose pre{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:.9rem 1rem; overflow-x:auto; margin:0 0 1.2rem;
}
.prose pre code{background:none; padding:0; font-size:.82rem; line-height:1.55}
.prose blockquote{
  margin:0 0 1.2rem; padding:.1rem 0 .1rem 1rem; border-left:2px solid var(--line);
  color:var(--muted);
}
.prose hr{border:0; border-top:1px solid var(--line); margin:2rem 0}
.note{
  background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--amber);
  border-radius:0 8px 8px 0; padding:.8rem 1rem; margin:0 0 1.2rem; font-size:.94rem;
}
.note p:last-child{margin-bottom:0}
.prose table{width:100%; border-collapse:collapse; margin:0 0 1.2rem; font-size:.9rem}
.prose th,.prose td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono); font-size:.74rem; text-transform:uppercase;
          letter-spacing:.08em; color:var(--muted); font-weight:500}
.prose td{font-variant-numeric:tabular-nums}

.article-foot{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
              font-family:var(--mono); font-size:.8rem}

footer{margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
       font-family:var(--mono); font-size:.76rem; color:var(--muted);
       display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
footer a{color:var(--muted)} footer a:hover{color:var(--accent)}