* {
	padding: 0;
	margin: 0;
} 
/* Basic Typography */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  	font-family: 'Bree Serif';
  	src: local('Bree Serif'), 
  		 local('BreeSerif-Regular'),
  		 url('../fonts/BreeSerif-Regular.ttf') format('truetype'),
  		 url('../fonts/BreeSerif-Regular.woff2') format('woff2');
}

html, body {
	font-size: 1em;
	line-height: 1.65em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	color:#444;
}

html {
	height: 100%;
}
body {
	padding: 2em 2.5em 1em 20em;
}

/* Blocks */
header {
	border-right: 1px #eee solid;
	padding: 2em;
	position:fixed;
	top: 0;
	left: 0;
	height:100%;
	width:13.5em;
}
#content {
	display: block;
	width: 100%;
}
footer {
	padding: 1em 0em 2.5em 0em;
	font-size:0.8em;
	line-height: 1.5em;
	color: #777;
}
article {
	border-bottom: 0.1em #eee solid;
	padding-bottom: 1.7em;
}
p, hr, h4, h5, h6 {
	margin-top: 0.9em;
	margin-bottom: 0.9em;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: "Bree Serif", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
	font-weight: 400 !important;
}
h1 {
	font-size: 2.5em;
	line-height: 1.1em;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}
h2 {
	font-size:1.9em;
	line-height: 1.2em;
	margin-top: 0.7em;
	margin-bottom: 0.7em;	
}
h3 {
	font-size:1.4em;
	line-height: 1.3em;
	margin-top: 0.8em;
	margin-bottom: 0.8em;	
}
h4 {
	font-size:1.3em;
}
h5 {
	font-size:1.2em;
}
h6 {
	font-size:1.1em;
}
/* Page Elements */
img, iframe {
	max-width: 100%;
}
a {
	font-weight:700;
	text-decoration:none;
	color: #333; /* Change Link Color */
}
a:hover {
	text-decoration:underline;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-weight:400 !important;
}
strong {
	font-weight: 700;
}
blockquote {
	border-left: 0.4em solid #eee;
	padding-left: 1.2em;
	font-size: 1.3em;
}
hr{
 	border: 0;
	height: 1px;
	background: #eee;
}
ul, ol {
	margin-left: 3em; 
}
code {
	/*for code highlighting */
	font-size:1.4em;
	background: #eee;
}
pre {
	font-size: 0.8em;
	line-height: 2em;
	background: #eee;
	padding: 1em;
	word-break: break-all;
	word-wrap: break-word;
	white-space: pre;
	white-space: -moz-pre-wrap;
	white-space: pre-wrap;
	white-space: pre\9; 
}
input {
	font-size:1em;
	padding: 0.3em;
}
/* Sidebar */
header h1 {
	font-size:1.9em;
	margin-top:0.8em;
	margin-bottom:0.6em;
}
header h1 a {
	color:#444;
}  
header h1 a:hover {
	text-decoration:none;
}
header #logo img {
	width:9em;
	height:9em;
	border-radius:4.5em;
	-moz-border-radius: 4.5em;
	-webkit-border-radius: 4.5em;
	border: none;
}
#follow-icons {
	font-size: 0.7em;
	margin-top: -0.7em;
	margin-bottom: 1.5em;
}
#follow-icons a {
	color: #ccc;
}	
#follow-icons span {
	vertical-align:top;
	margin-left:-0.15em;
	margin-right:-0.15em;
}
#follow-icons span .fa-stack-1x {
	font-size:1.05em;
	line-height:1.9em;
}
header h6 {
	margin-top:0.5em;
}
/* Posts */
article span.post-stamp {
	color:#777;     
}
h1.post-title {
	margin-top:0.35em;
	margin-bottom: 0.6em;
}
h3.post-title {
	margin-top:0.4em;
	padding-bottom:0.9em;
	border-bottom: 1px solid #eee;
	font-size: 1.2em;
	color: #444;
}
.post-title .feature-star {
	font-size: 0.9em;
}
.separator, .taglist, .feature-star {
	color: #ccc;
}
.pubdate {
	background-color:#ddd;
	color:#fff;
	padding:0.3em 0.6em 0.3em 0.6em;
	vertical-align:10%;  
	font-size:0.5em;
	font-family: "Open Sans", sans-serif;
	font-weight: 700 !important;
	text-transform:uppercase;
	letter-spacing:0.05em;
	border-radius:0.25em;
	-moz-border-radius: 0.25em;
	-webkit-border-radius: 0.25em;
}
.taglist a {
	background-color:#ccc;
	color:#fff;
	padding:0.3em 0.6em 0.3em 0.6em;
	vertical-align:10%;  
	font-size:0.5em;
	font-family: "Open Sans", sans-serif;
	font-weight: 700 !important;
	text-transform:uppercase;
	letter-spacing:0.05em;
	border-radius:0.25em;
	-moz-border-radius: 0.25em;
	-webkit-border-radius: 0.25em;
}
#social-bar {
	margin-top:1.5em;
	background-color:#eee;
	padding:0.5em;
}
#comments {
	margin-top: 0.15em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #eee;
}
/* Footer */
.pagination {
	margin-bottom:1em;
}
footer a {
	font-weight:300;
	color:#777;
	text-decoration: underline;
} 
footer a:hover {
	color:#444;
	text-decoration: none;
}
/* Large Screens */
@media only screen and (min-width: 1281px) {
	html, body {
		font-size: 1.1em;
	} 
}
/* Small Screens */
@media only screen and (max-width: 800px) { 
	body {
		padding:0;
	}
	header {
		border-right: none;
		border-bottom: 1px #eee solid;
		position:relative;
		height:auto;
		width:auto;
		text-align:center;
		padding-bottom:1em;
	}
	#content {
		margin-left: 0;
		padding: 2em 2em 1em 2em;
		width: auto;
	}
	footer {
		padding: 0 2.5em 2em 2.5em;
	}
}
/* Tiny Screens */
@media only screen and (max-width: 320px) { 
	header {
		padding: 1.2em 1.2em 0.6em 1.2em;
	}
	#content {
		padding: 1.2em 1.2em 0.6em 1.2em;
	}
	footer {
		padding: 0 1.5em 1.2em 1.5em;
	}
	ul, ol {
		margin-left: 2em; 
	}
}


.article-entry pre,
.article-entry .highlight {
  width: 70%;
  background: #2d2d2d;
  margin: 0 10px;
  padding: 15px 20px;
  border-style: solid;
  border-color: #ddd;
  border-width: 1px 0;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  overflow: auto;
  color: #ccc;
  line-height: 24px;
}
.article-entry .highlight .gutter pre,
.article-entry .gist .gist-file .gist-data .line-numbers {
  color: #666;
  font-size: 0.85em;
}
.article-entry pre,
.article-entry code {
  font-family: Consolas, Monaco, Menlo, Consolas, monospace;
}
.article-entry code {
  text-shadow: 0 1px #fff;
  padding: 0 0.3em;
}
.article-entry pre code {
  background: none;
  text-shadow: none;
  padding: 0;
}
.article-entry .highlight pre {
  border: none;
  margin: 0;
  padding: 0;
}
.article-entry .highlight table {
  margin: 0;
  width: auto;
}
.article-entry .highlight td {
  border: none;
  padding: 0;
}
.article-entry .highlight figcaption {
  font-size: 0.85em;
  color: #999;
  line-height: 1em;
  margin-bottom: 1em;
}
.article-entry .highlight figcaption:before,
.article-entry .highlight figcaption:after {
  content: "";
  display: table;
}
.article-entry .highlight figcaption:after {
  clear: both;
}
.article-entry .highlight figcaption a {
  float: right;
}
.article-entry .highlight .gutter pre {
  text-align: right;
  padding-right: 20px;
}
.article-entry .highlight .line {
  height: 24px;
}
.article-entry .gist {
  margin: 0 -20px;
  border-style: solid;
  border-color: #ddd;
  border-width: 1px 0;
  background: #2d2d2d;
  padding: 15px 20px 15px 0;
}
.article-entry .gist .gist-file {
  border: none;
  font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
  margin: 0;
}
.article-entry .gist .gist-file .gist-data {
  background: none;
  border: none;
}
.article-entry .gist .gist-file .gist-data .line-numbers {
  background: none;
  border: none;
  padding: 0 20px 0 0;
}
.article-entry .gist .gist-file .gist-data .line-data {
  padding: 0 !important;
}
.article-entry .gist .gist-file .highlight {
  margin: 0;
  padding: 0;
  border: none;
}
.article-entry .gist .gist-file .gist-meta {
  background: #2d2d2d;
  color: #999;
  font: 0.85em "Apple LiGothic Medium", "Microsoft JhengHei";
  text-shadow: 0 0;
  padding: 0;
  margin-top: 1em;
  margin-left: 20px;
}
.article-entry .gist .gist-file .gist-meta a {
  color: #444;
  font-weight: normal;
}
.article-entry .gist .gist-file .gist-meta a:hover {
  text-decoration: underline;
}
pre .comment,
pre .title {
  color: #999;
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: #f2777a;
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: #f99157;
}
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #9c9;
}
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: #9c9;
}
pre .css .hexcolor {
  color: #6cc;
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #69c;
}
pre .keyword,
pre .javascript .function {
  color: #c9c;
}

/* ============================================================
   Simplicity & organization refinements (appended)
   ============================================================ */

/* Sidebar nav */
#menu {
	margin: 0.2em 0 1.4em 0;
	line-height: 1.9em;
}
#menu a {
	display: block;
	color: #666;
	font-size: 0.95em;
	text-decoration: none;
	border: none;
}
#menu a:hover { color: #111; }

#follow-links { font-size: 0.8em; margin-bottom: 1.2em; }
#follow-links a { color: #999; margin-right: 0.6em; }
#follow-links a:hover { color: #333; }

/* Homepage / category post index */
.post-list { margin-bottom: 2em; }
h2.year {
	font-size: 1.15em;
	color: #bbb;
	font-weight: 400;
	margin: 1.6em 0 0.6em 0;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #f0f0f0;
	letter-spacing: 0.08em;
}
.post-item {
	display: flex;
	align-items: baseline;
	padding: 0.35em 0;
	line-height: 1.5em;
}
.post-item .pubdate {
	background: none;
	color: #bbb;
	padding: 0;
	margin-right: 1em;
	font-size: 0.8em;
	font-weight: 400 !important;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	min-width: 3.2em;
}
.post-item .post-link {
	color: #333;
	border: none;
	flex: 1;
}
.post-item .post-link:hover { color: #000; text-decoration: underline; }
.post-item .taglist { margin-left: 0.8em; }
.post-item .taglist a {
	background: none;
	color: #ccc;
	padding: 0;
	margin-left: 0.5em;
	font-size: 0.72em;
	font-weight: 400 !important;
	text-transform: none;
	letter-spacing: 0;
}
.post-item .taglist a:hover { color: #999; }

/* Categories index */
.category-group { margin-bottom: 1.8em; }
h3.category-name { font-size: 1.15em; color: #444; margin-bottom: 0.3em; border: none; padding: 0; }
h3.category-name .count { color: #ccc; font-size: 0.7em; font-weight: 400; margin-left: 0.4em; }

/* Readable measure for post bodies */
article.post { max-width: 44em; }

/* Lighter pagination */
.pagination { color: #bbb; font-size: 0.85em; margin-top: 1.5em; }

/* ---- user refinements: tag position, title color, name color ---- */

/* tags sit right after the title (not pushed to the far right) */
.post-item .post-link { flex: 0 1 auto; color: #666; }
.post-item .taglist { margin-left: 1em; }

/* article titles use the menu link color */
.post-item .post-link,
h1.post-title,
h3.post-title,
h1.post-title a,
.post-title a { color: #666; }

/* my name in the sidebar: lighter than menu/title, less prominent */
header h1 a { color: #aaa; }

/* pagination links match the menu/title neutral */
.pagination a { color: #666; }
.pagination a:hover { color: #111; text-decoration: none; }

/* ---- code blocks: full width, wrap (no horizontal scrollbar), smaller text ---- */
.article-entry pre,
.article-entry .highlight {
  width: auto;
  max-width: 100%;
  margin: 1.2em 0;
  padding: 1em 1.2em;
  white-space: pre-wrap;      /* wrap long lines instead of scrolling */
  word-wrap: break-word;
  word-break: break-word;
  overflow-x: auto;           /* safety net; wrapping means it won't trigger */
  font-size: 0.78em;          /* clearly smaller than body text */
  line-height: 1.55;
}
.article-entry pre code {
  font-size: inherit;         /* cancel the big inline `code { font-size:1.4em }` */
  white-space: inherit;
  word-break: inherit;
}

/* ============================================================
   Article content polish — professional/sophisticated pass
   ============================================================ */

/* Comfortable reading rhythm, tuned for mixed Chinese/English */
.article-entry {
  font-size: 1.02em;
  line-height: 1.9;
  color: #3a3a3a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.article-entry p { margin: 1.05em 0; }
.article-entry ul, .article-entry ol { margin: 1.05em 0 1.05em 1.6em; }
.article-entry li { margin: 0.35em 0; }

/* Post meta (date · tags) above the title — quiet and small */
.post-meta {
  color: #b3b3b3;
  font-size: 0.82em;
  letter-spacing: 0.03em;
  margin-bottom: 0.1em;
}
.post-meta .taglist { color: #cfcfcf; }
.post-meta .taglist a { color: #b3b3b3; font-weight: 400; }
.post-meta .taglist a:hover { color: #777; }

/* Post title: a touch tighter under the meta */
h1.post-title { margin-top: 0.15em; line-height: 1.15; }

/* Inline code — small, subtle, monospace chip */
.article-entry code {
  font-size: 0.85em;
  background: #f3f3f3;
  color: #444;
  border: 1px solid #ececec;
  border-radius: 3px;
  padding: 0.08em 0.4em;
  text-shadow: none;
  word-break: break-word;
}

/* Images — centered, breathing room, soft frame; cap tall screenshots */
.article-entry img {
  display: block;
  margin: 1.7em auto;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border: 1px solid #ececec;
  border-radius: 5px;
  box-shadow: 0 1px 10px rgba(0,0,0,0.06);
}

/* Blockquote — restrained accent, not oversized */
.article-entry blockquote {
  font-size: 1em;
  color: #666;
  border-left: 3px solid #e2e2e2;
  padding: 0.1em 0 0.1em 1.2em;
  margin: 1.3em 0;
  font-style: normal;
}
.article-entry blockquote p { margin: 0.4em 0; }

/* In-content headings — clear hierarchy and spacing */
.article-entry h1, .article-entry h2, .article-entry h3, .article-entry h4 {
  color: #333;
  margin-top: 1.7em;
  margin-bottom: 0.55em;
  line-height: 1.35;
}
.article-entry h2 { font-size: 1.5em; }
.article-entry h3 { font-size: 1.25em; }

/* Code block finish — soft rounded panel with depth */
.article-entry pre {
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 12px rgba(0,0,0,0.14);
}

/* The trailing "original refer" divider/link reads as a quiet footnote */
.article-entry hr { margin: 2em 0 1.2em; }

/* Text selection stays on-theme */
::selection { background: #e8e8e8; }

/* Home: "All posts" link + archive year counts */
.all-posts-link { margin-top: 1.8em; font-size: 0.95em; }
.all-posts-link a { color: #666; }
.all-posts-link a:hover { color: #111; }
.year-count {
  font-size: 0.6em;
  color: #ccc;
  font-weight: 400;
  vertical-align: middle;
  margin-left: 0.3em;
}

/* ---- Archives: fixed right-hand year index ---- */
html { scroll-behavior: smooth; }
.post-list--archive .year { scroll-margin-top: 1.5em; }

.year-index {
  position: fixed;
  top: 2.5em;
  right: 2.2em;
  width: 5em;
  text-align: right;
  line-height: 1.85;
  border-right: 1px solid #eee;
  padding-right: 1em;
}
.year-index a {
  display: block;
  color: #c4c4c4;
  font-size: 0.9em;
  font-weight: 400;
  border: none;
}
.year-index a:hover { color: #333; }
.year-index a.active { color: #333; font-weight: 700; }
.year-index .yi-count {
  color: #dcdcdc;
  font-size: 0.75em;
  margin-left: 0.35em;
}

/* give the archive list room so text never slides under the panel */
.post-list--archive { padding-right: 7em; }

@media only screen and (max-width: 800px) {
  .year-index { display: none; }
  .post-list--archive { padding-right: 0; }
}

/* ---- Category pages: fixed right-hand category index ---- */
.cat-index {
  position: fixed;
  top: 2.5em;
  right: 2.2em;
  width: 8.5em;
  text-align: right;
  border-right: 1px solid #eee;
  padding-right: 1em;
  line-height: 1.9;
}
.cat-index a {
  display: block;
  color: #c4c4c4;
  font-size: 0.88em;
  font-weight: 400;
  border: none;
}
.cat-index a:hover { color: #333; }
.cat-index a.active { color: #333; font-weight: 700; }
.cat-index .yi-count { color: #dcdcdc; font-size: 0.78em; margin-left: 0.3em; }

.post-list--category { padding-right: 11.5em; }
.cat-title { color: #333; font-weight: 400; margin-bottom: 0.6em; }

@media only screen and (max-width: 800px) {
  .cat-index { display: none; }
  .post-list--category { padding-right: 0; }
}

/* ---- Comments (giscus) ---- */
#comments.post-comments {
  margin-top: 2.6em;
  padding-top: 1.6em;
  border-top: 1px solid #eee;
  border-bottom: none;
}
.comments-title {
  font-size: 1.15em;
  color: #666;
  margin-bottom: 0.8em;
}

/* ---- Unify ALL code blocks to the light (Solarized-light) theme ----
   Fixes plain ``` blocks that were dark (#2d2d2d) with invisible dark text.
   Language-classed blocks are still styled by prism-solarizedlight.css (same palette). */
.article-entry pre {
  background: #fdf6e3;          /* base3 — matches Prism solarized-light */
  color: #657b83;              /* base00 text */
  border: 1px solid #eee;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.article-entry pre code {
  color: #657b83;
  background: none;
  border: none;
  padding: 0;
  text-shadow: none;
}