/* pugloo — shared brutalist/monospace design system. One source of truth for
   every page (index, signup, changelog, stacktrace). System fonts only. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fbfbfa; --fg:#18181b; --muted:#71717a; --faint:#a1a1aa;
  --accent:#0e7490; --accent-bright:#06b6d4;
  --line:#e4e4e7; --code-bg:#f4f4f5;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0a0a0b; --fg:#e4e4e7; --muted:#a1a1aa; --faint:#52525b;
    --accent:#22d3ee; --accent-bright:#67e8f9;
    --line:#27272a; --code-bg:#141416;
  }
}
html{font-size:15px}
body{background:var(--bg); color:var(--fg); font-family:var(--mono); line-height:1.6;
  -webkit-font-smoothing:antialiased; font-feature-settings:"liga" 0}
.wrap{max-width:720px; margin:0 auto; padding:0 1.5rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--accent-bright); color:#000}

/* header / nav (identical on every page) */
header{border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; flex-wrap:wrap}
.brand{font-weight:700; color:var(--fg); font-size:1rem}
.brand:hover{text-decoration:none}
.brand .cur{color:var(--accent)}
.links{display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.82rem}
.links a{color:var(--muted)}
.links a:hover{color:var(--accent)}
.links .cta{color:var(--accent); font-weight:700}

/* sections / type */
section{padding:3rem 0}
#top{padding-top:3.5rem}
h1{font-size:2rem; line-height:1.2; font-weight:700; letter-spacing:-.02em; margin-bottom:1rem}
h1 .hl{color:var(--accent)}
.cur2{color:var(--accent); font-weight:400; animation:b 1.1s steps(1) infinite}
@keyframes b{50%{opacity:0}}
.lead{color:var(--muted); font-size:1rem; max-width:56ch; margin-bottom:1.5rem}
.label{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:.85rem}
h2{font-size:1.1rem; font-weight:700; margin-bottom:.85rem; letter-spacing:-.01em}
h2 .mk{color:var(--accent)}
p{color:var(--muted); margin-bottom:1rem}
p:last-child{margin-bottom:0}
.fg{color:var(--fg)}
.note{font-size:.8rem; color:var(--faint); margin-top:.85rem}

/* divider */
.div{text-align:center; color:var(--faint); letter-spacing:.8em; user-select:none}

/* code blocks */
pre{background:var(--code-bg); border:1px solid var(--line); border-radius:8px;
  padding:1rem 1.15rem; overflow-x:auto; font-size:.85rem; line-height:1.7; margin:0}
code{font-family:var(--mono)}
.p{color:var(--accent)} .c{color:var(--fg); font-weight:600} .o{color:var(--muted)}
.ok{color:#16a34a} .u{color:var(--accent); text-decoration:underline} .k{color:var(--accent)}

/* feature list */
ul.feat{list-style:none; margin-top:1.1rem; font-size:.9rem}
ul.feat li{padding:.18rem 0; color:var(--muted)}
ul.feat li::before{content:"+ "; color:var(--accent); font-weight:700}

/* install copy row */
.copy{display:flex; align-items:center; gap:.75rem; background:var(--code-bg);
  border:1px solid var(--line); border-radius:8px; padding:.8rem 1.15rem; font-size:.9rem; flex-wrap:wrap}
.copy code{flex:1; min-width:13rem}
.copy button{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  cursor:pointer; color:var(--muted); background:transparent; border:1px solid var(--line);
  border-radius:5px; padding:.3rem .65rem}
.copy button:hover{color:var(--accent); border-color:var(--accent)}

/* footer */
footer{border-top:1px solid var(--line); padding:1.75rem 0 3rem; font-size:.82rem; color:var(--muted)}
.foot-row{display:flex; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; align-items:center}
.foot-links{display:flex; gap:1.25rem; flex-wrap:wrap}
.stamp{color:var(--faint)}

/* ---- content / prose pages (signup, changelog, stacktrace, articles) ---- */
.page{padding:2.5rem 0 1rem}
.page-title{font-size:1.7rem; line-height:1.2; letter-spacing:-.02em; margin-bottom:.5rem}
.subtitle{color:var(--muted); max-width:60ch; margin-bottom:.5rem}
.meta{color:var(--faint); font-size:.82rem; margin-bottom:1rem}
.crumbs{display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.82rem; padding-top:1.5rem}
.btn{display:inline-block; border:1px solid var(--accent); color:var(--accent);
  border-radius:6px; padding:.6rem 1rem; font-weight:700; margin:1rem 0}
.btn:hover{background:var(--accent); color:var(--bg); text-decoration:none}

.prose{padding-bottom:2.5rem}
.prose h2{font-size:1.1rem; font-weight:700; margin:2rem 0 .7rem}
.prose h2::before{content:"# "; color:var(--accent)}
.prose p{margin-bottom:1rem; line-height:1.7}
.prose ul{list-style:none; margin:0 0 1rem; font-size:.92rem}
.prose ul li{padding:.18rem 0; color:var(--muted)}
.prose ul li::before{content:"- "; color:var(--accent); font-weight:700}
.prose pre{margin:0 0 1rem}
.prose code:not(pre code){color:var(--fg); background:var(--code-bg); border:1px solid var(--line);
  border-radius:4px; padding:.05rem .35rem; font-size:.9em}

/* changelog versions + auto commit feed (structure fixed by sync script) */
.ver{margin-bottom:1.8rem}
.ver h2{font-size:1rem; margin-bottom:.5rem}
.ver h2::before{content:"## "; color:var(--accent)}
.commit-feed{list-style:none; margin:.5rem 0; font-size:.82rem; display:grid; gap:0}
.commit-feed li{display:grid; grid-template-columns:auto 6.5rem 1fr; gap:1rem; align-items:baseline;
  padding:.35rem 0; border-bottom:1px solid var(--line); color:var(--muted)}
.commit-feed code{color:var(--accent)}
@media (max-width:560px){.commit-feed li{grid-template-columns:1fr; gap:.1rem}}

/* stacktrace post cards */
.post{border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.25rem; margin-bottom:1rem}
.post:hover{border-color:var(--accent)}
.post h2{font-size:1rem; margin:.25rem 0}
.post .meta{margin-bottom:.4rem}