:root{
  --bg:#0b0d10;
  --fg:#c8c8c8;
  --dim:#5f6670;
  --accent:#7aa2f7;
  --line:#23272f;
}

@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --bg:#ffffff;
    --fg:#24292f;
    --dim:#57606a;
    --accent:#0969da;
    --line:#d0d7de;
  }
}
:root[data-theme="light"],
:root[data-theme="auto"]{
  --bg:#ffffff;
  --fg:#24292f;
  --dim:#57606a;
  --accent:#0969da;
  --line:#d0d7de;
}
:root[data-theme="dark"]{
  --bg:#0b0d10;
  --fg:#c8c8c8;
  --dim:#5f6670;
  --accent:#7aa2f7;
  --line:#23272f;
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light dark}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  padding:28px 20px 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:background .3s,color .3s;
}

.container{max-width:760px;width:100%;position:relative;z-index:1}
pre{font-family:"SFMono-Regular",Consolas,"Courier New",monospace;font-size:12px;line-height:1.35;overflow-x:auto}
pre.logo{color:var(--accent);margin-bottom:28px;font-weight:600}

.sysinfo{
  color:var(--dim);
  font-family:"SFMono-Regular",Consolas,"Courier New",monospace;
  font-size:13px;
  margin-bottom:8px;
  white-space:pre-line;
}
.sysinfo .prompt{color:var(--accent);font-weight:600}
.sysinfo .tag{color:var(--accent)}

h2{color:var(--fg);font-size:15px;margin-bottom:18px;text-transform:uppercase;letter-spacing:2px}
section.section{margin:44px 0 0}

.hint{color:var(--dim);font-size:13px;margin-bottom:14px}
.hint a{color:var(--accent)}

.item{display:flex;gap:12px;margin-bottom:12px;font-size:14px;align-items:baseline}
.item .label{color:var(--dim);font-family:"SFMono-Regular",Consolas,"Courier New",monospace;font-size:13px;min-width:100px;flex-shrink:0}
.item .val a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.item .val a:hover{color:var(--accent);border-color:var(--accent)}

#articles .item .val .live{color:var(--accent);font-size:13px;margin-left:8px;text-decoration:none;vertical-align:middle;line-height:1}
#articles .item .val .live:hover{opacity:.6}
#articles .item .val .tag{color:var(--dim);font-size:12px;margin-left:10px;font-family:"SFMono-Regular",Consolas,"Courier New",monospace;white-space:nowrap;vertical-align:middle}
#articles .item .date{color:var(--dim);font-size:13px;font-family:"SFMono-Regular",Consolas,"Courier New",monospace;white-space:nowrap;flex-shrink:0;margin-left:20px}

.items .item{justify-content:space-between;align-items:center}
.proj-meta{color:var(--dim);font-size:12px;white-space:nowrap}
.proj-desc{color:var(--dim);font-size:13px;width:100%;margin:-6px 0 14px}
.items .item .val a{font-weight:500}

/* ---- bg canvas ---- */
#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---- header buttons ---- */
.site-head{width:100%;max-width:760px;display:flex;justify-content:flex-end;margin-bottom:8px;position:relative;z-index:1}
.btn-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start}
.btn-row{display:flex;gap:4px}
.head-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--dim);
  border-radius:6px;
  width:28px;height:28px;
  font-size:11px;
  font-family:"SFMono-Regular",Consolas,"Courier New",monospace;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s;
}
.head-btn:hover{color:var(--accent);border-color:var(--accent)}
#music-toggle.active{color:var(--accent);border-color:var(--accent)}
.music-label{
  position:absolute;top:100%;left:0;
  width:28px;
  color:var(--dim);
  font-size:9px;
  font-family:"SFMono-Regular",Consolas,"Courier New",monospace;
  text-align:center;
  line-height:14px;
}

#theme-toggle .moon{display:none}
:root[data-theme="dark"] #theme-toggle .sun{display:block}
:root[data-theme="dark"] #theme-toggle .moon{display:none}
:root[data-theme="light"] #theme-toggle .sun{display:none}
:root[data-theme="light"] #theme-toggle .moon{display:block}
:root[data-theme="auto"] #theme-toggle .sun,
:root[data-theme="auto"] #theme-toggle .moon{display:none}
:root[data-theme="auto"] #theme-toggle::after{content:"auto";font-size:8px}

footer{
  margin-top:56px;
  color:var(--dim);
  font-size:12px;
  border-top:1px dashed var(--line);
  padding-top:18px;
  text-align:center;
  width:100%;
  max-width:760px;
  position:relative;z-index:1;
}

@media(max-width:600px){
  pre.logo{font-size:8px}
  pre{font-size:10px}
  .item{flex-wrap:wrap;gap:2px 12px}
  .item .label{min-width:0}
}