:root{
  --background:220 10% 7%;
  --foreground:0 0% 96%;
  --card:220 9% 11%;
  --muted:220 8% 16%;
  --muted-foreground:220 9% 62%;
  --border:220 8% 19%;
  --primary:152 66% 45%;
  --radius:0.85rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  background:hsl(var(--background));color:hsl(var(--foreground));line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:hsl(var(--primary));text-decoration:none}
a:hover{text-decoration:underline}
img{display:block}
.container{width:100%;max-width:820px;margin:0 auto;padding:0 1.15rem}

/* header */
header.site{position:sticky;top:0;z-index:50;border-bottom:1px solid hsl(var(--border)/.5);
  background:hsl(var(--background)/.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hbar{display:flex;height:4rem;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.2rem;color:hsl(var(--foreground))}
.logo:hover{text-decoration:none}
.logo .mark{width:2.1rem;height:2.1rem;display:flex;align-items:center;justify-content:center;
  background:hsl(var(--primary)/.14);border-radius:.6rem}
.logo .mark img{width:88%;height:88%;object-fit:contain}
.logo b{color:hsl(var(--primary))}
.backlink{font-size:.92rem;color:hsl(var(--muted-foreground))}

/* content */
main{padding:2.5rem 0 4rem}
.doc h1{font-size:2rem;font-weight:850;letter-spacing:-.02em;margin-bottom:.4rem}
.doc .updated{color:hsl(var(--muted-foreground));font-size:.9rem;margin-bottom:2rem}
.doc h2{font-size:1.25rem;font-weight:750;margin:2rem 0 .7rem;letter-spacing:-.01em}
.doc p{margin-bottom:.9rem;color:hsl(220 9% 82%)}
.doc ul{margin:0 0 .9rem 1.3rem}
.doc li{margin-bottom:.45rem;color:hsl(220 9% 82%)}
.doc .note{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  padding:1rem 1.2rem;margin:1.2rem 0;color:hsl(var(--muted-foreground));font-size:.92rem}
.doc strong{color:hsl(var(--foreground))}

/* footer */
footer.site{border-top:1px solid hsl(var(--border)/.5);padding:1.6rem 0;text-align:center;
  color:hsl(var(--muted-foreground));font-size:.86rem}
footer.site nav{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-bottom:.8rem}
footer.site nav a{color:hsl(var(--muted-foreground))}