:root{
  --bg0:#1d1926; --bg1:#241f2f; --surface:rgba(244,234,216,.045);
  --line:rgba(244,234,216,.10);
  --accent:#f2a65a; --accent-hi:#ffbd7d; --accent-ink:#241c12;
  --cream:#f4ead8; --dim:#a99fb8; --dim-2:#7e7590;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:linear-gradient(var(--bg1), var(--bg0) 40%);
  background-color:var(--bg0);
  color:var(--cream);
  font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.7;
  padding-bottom:120px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,.wordmark{font-family:"Space Grotesk",Inter,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
nav{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(29,25,38,.72);border-bottom:1px solid var(--line);
}
.nav-in{max-width:760px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:center;gap:10px;color:var(--cream);font-weight:700;font-size:1.02rem}
.wordmark img{width:26px;height:26px;image-rendering:pixelated}
.nav-in a.back{color:var(--dim);font-size:.92rem;font-weight:500}
.nav-in a.back:hover{color:var(--cream)}
main{max-width:760px;margin:0 auto;padding:56px 24px 40px}
h1{font-size:2rem;letter-spacing:-.01em;margin-bottom:6px}
.updated{color:var(--dim-2);font-size:.88rem;margin-bottom:36px}
h2{font-size:1.2rem;margin:34px 0 10px;letter-spacing:-.01em}
p,ul{color:var(--dim);margin-bottom:14px}
ul{padding-left:22px}
li{margin-bottom:6px}
strong{color:var(--cream)}
pre{
  background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;margin:0 0 14px;overflow-x:auto;
  font-family:Consolas,Menlo,monospace;font-size:.88rem;line-height:1.6;color:var(--cream);
}
code{font-family:Consolas,Menlo,monospace;font-size:.9em;background:rgba(0,0,0,.28);padding:2px 6px;border-radius:6px}
pre code{background:none;padding:0}
table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:.92rem}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--dim);vertical-align:top}
th{color:var(--cream);font-weight:600}
td:first-child{color:var(--accent);white-space:nowrap;font-family:Consolas,Menlo,monospace;font-size:.85rem}
.foot{max-width:760px;margin:0 auto;padding:24px;border-top:1px solid var(--line);color:var(--dim-2);font-size:.88rem;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.foot a{color:var(--dim)}
.catbar{position:fixed;left:0;right:0;bottom:0;height:48px;background:#2b2536;border-top:2px solid var(--accent);z-index:50}
.cat{position:fixed;bottom:36px;width:80px;height:80px;background-size:640px 80px;image-rendering:pixelated;z-index:51;cursor:pointer}
.heart{position:fixed;width:24px;height:24px;image-rendering:pixelated;z-index:60;pointer-events:none}
.w1{background-image:url(assets/cat01_walk.png);animation:frames8 .9s steps(8) infinite, crossL 40s linear infinite}
.s1{background-image:url(assets/cat02_sleep.png);animation:frames8 2.4s steps(8) infinite;right:10vw}
@keyframes frames8{from{background-position:0 0}to{background-position:-640px 0}}
@keyframes crossL{from{left:-90px}to{left:100vw}}
@media (prefers-reduced-motion: reduce){
  .w1{animation:frames8 1s steps(8) infinite;left:20vw}
}