:root{
  --bg:#fffcff;
  --bg-dark:#181214;
  --text-accent:#5e72be;
  --text-primary:#661461;
  --text-secondary:#a58fa4;
  --text-disabled:#c8c8c8;
  --control-bg:#fffcff;
  --control-outline:#a58fa4;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#1f1a1d;
    --bg-dark:#181214;
    --text-accent:#877eb0;
    --text-primary:#d387a4;
    --text-secondary:#7c6d80;
    --text-disabled:#757575;
    --control-bg:#2b2128;
    --control-outline:#7b5060;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-dark);
  color:var(--text-primary);
  font:14px/1.35 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* Background (castle) */
#bg-grid{position:fixed; inset:0; z-index:-1; background:url("/static/img/castle.png") repeat;}
@media (prefers-color-scheme: light){
  #bg-grid{background:url("/static/img/castle.png") repeat;}
}

.container{
  min-height:100vh; max-width:720px; margin:0 auto; padding:24px;
  background:var(--bg); border-left:1px solid var(--text-secondary); border-right:1px solid var(--text-secondary)
}
.site-header{display:flex; justify-content:center; position:relative}
.nav{display:flex; gap:8px; align-items:center}
.nav .sep{color:var(--text-secondary)}
.nav .nav-link{color:inherit; text-decoration:none}
.section{margin:18px 0}

.h1{font-size:18px; font-weight:700}
.h3{margin:0 0 8px; font-size:14px; font-weight:700}

.about-wrap{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:start}
.avatar{width:64px; height:64px; border-radius:999px; object-fit:cover; filter:brightness(.95)}
.about-text .lead{margin:.5rem 0 0; color:var(--text-secondary)}

.tags-row{margin:.5rem 0; display:flex; flex-wrap:wrap; gap:6px}
.cta-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px;
  background:var(--control-bg); border:1px solid var(--control-outline); text-decoration:none; color:inherit
}
.btn.ghost{background:transparent}
.icon{width:18px; height:18px}

.info-grid{display:grid; grid-template-columns:140px 1fr; gap:6px 16px}
.key{white-space:nowrap}
.val{overflow:hidden}
.muted{color:var(--text-secondary)}
.sep-dot{margin:0 .5rem; color:var(--text-secondary)}
.underline{text-decoration:underline}
.dotted{text-decoration-style:dotted}
.pill{
  display:inline-block; padding:2px 6px; border:1px solid var(--control-outline);
  border-radius:6px; background:var(--control-bg); margin-right:4px
}
.color-swatch{
  display:inline-block; width:16px; height:16px; border-radius:4px; border:1px solid var(--control-outline);
  background:var(--swatch); vertical-align:middle; margin-left:6px
}
.emoji{height:1em; width:1em; vertical-align:middle}
.nowrap{white-space:nowrap}

.buttons-88x31{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; margin-top:6px}
.image-render-pixel{image-rendering:pixelated}

.pager{display:flex; align-items:center; justify-content:space-between}
.site-footer{margin-top:32px; padding-top:8px; border-top:1px solid var(--text-secondary); text-align:center; color:var(--text-secondary)}

:focus-visible{outline:1px solid var(--text-primary)}