:root{
  --bg:#0e1013;
  --panel:#15181d;
  --panel-alt:#1a1e24;
  --border:#262b33;
  --border-soft:#20242b;
  --text:#e7eaee;
  --text-dim:#8b93a1;
  --text-faint:#565d69;
  --accent:#3fb28f;
  --accent-hi:#57d1ab;
  --accent-dim:#2a7a63;
  --font-ui: -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.65;
}
.page{
  max-width:720px;
  margin:0 auto;
  padding:28px 20px 80px;
}
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.page-header h1{
  font-size:20px;
  margin:0;
}
.page-header .updated{
  font-size:12px;
  color:var(--text-faint);
  white-space:nowrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-dim);
  text-decoration:none;
  margin-bottom:18px;
}
.brand:hover{color:var(--accent-hi);}
h2{
  font-size:15.5px;
  color:var(--text);
  margin:30px 0 8px;
  border-left:3px solid var(--accent-dim);
  padding-left:10px;
}
p, li{
  color:var(--text-dim);
  font-size:14px;
}
ul, ol{padding-left:20px;}
li{margin-bottom:6px;}
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 18px;
  margin:16px 0;
}
.panel h3{
  margin:0 0 8px;
  font-size:13.5px;
  color:var(--accent-hi);
}
.panel p{margin:0;font-size:13.5px;}
kbd{
  background:var(--panel-alt);
  border:1px solid var(--border);
  border-radius:5px;
  padding:1px 6px;
  font-size:12px;
  font-family:ui-monospace, "SF Mono", Consolas, monospace;
  color:var(--text);
}
.footer-note{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--border-soft);
  font-size:11.5px;
  color:var(--text-faint);
  text-align:center;
}
a{color:var(--accent-hi);}