:root { --accent: #138296; --accent-dark: #0d6474; --ink: #4b5054; --ink-deep: #283438; --muted: #879296; --line: #e4ebec; --paper: #fff; --canvas: #f5f8f7; --soft-accent: #e7f3f4; --warm: #d8894d; --code: #202b30; --shadow: 0 10px 28px rgba(47,75,80,.07); }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--canvas); font: 16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; } body,button,input,textarea { letter-spacing: 0; } a { color: inherit; text-decoration: none; } button,input,textarea { font: inherit; } button { cursor: pointer; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Butterfly-style page header and navigation. */
#page-header { position: relative; width: 100%; background: transparent center/cover no-repeat; }
#header-background { position: absolute; inset: 0; z-index: 0; background-color: #eaf3f1; background-position: center 70%; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity .75s ease; }#header-background.is-ready { opacity: 1; }
#page-header.post-bg { background-color: #eaf3f1; background-position: center 70%; background-size: cover; background-repeat: no-repeat; }
body.post #page-header { animation: header-drop .65s ease both; }body.post #content-inner { animation: content-rise .65s .12s ease both; }@keyframes header-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }@keyframes content-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }.post-title.is-typing::after { content: '_'; color: var(--accent); animation: title-cursor .8s steps(1) infinite; }@keyframes title-cursor { 50% { opacity: 0; } }
#page-header.full_page { min-height: 470px; height: 68vh; background-attachment: fixed; }
#page-header.full_page::before { display: none; }
#page-header.post-bg { height: 380px; }
#page-header.archive-bg { height: 300px; background-color: #eaf3f1; background-position: center 70%; background-size: cover; background-repeat: no-repeat; }
#page-header.archive-bg, #page-header.post-bg-fallback { background-position: center 38.5%; }
#page-header.archive-bg::before { position: absolute; inset: 0; background: rgba(25,42,45,.34); content: ''; }
#page-header.post-bg::before { position: absolute; inset: 0; background: rgba(25,42,45,.56); content: ''; }
#page-header.not-top-img { height: 70px; margin-bottom: 10px; background: transparent; }
#nav { position: absolute; top: 0; z-index: 2; display: flex; align-items: center; width: 100%; height: 64px; padding: 0 36px; color: var(--ink); background: rgba(255,255,255,.34); border-bottom: 1px solid rgba(255,255,255,.58); backdrop-filter: blur(16px) saturate(1.12); transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; }
#nav.nav-hidden { transform: translateY(-100%); }#nav.nav-visible { transform: translateY(0); }#nav.nav-scrolled { position: fixed; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 5px 16px rgba(47,75,80,.08); backdrop-filter: blur(14px); }
#nav.nav-scrolled .menus_items .site-page { color: var(--ink); }#nav.nav-scrolled .menus_items .site-page:hover,#nav.nav-scrolled .menus_items .site-page.is-active { color: var(--accent); background: var(--soft-accent); }#nav.nav-scrolled #search-button input { color: var(--ink); background: #f1f5f4; }#nav.nav-scrolled #search-button button { color: var(--muted); }
#page-header.not-top-img #nav { position: fixed; color: var(--ink); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); box-shadow: 0 5px 16px rgba(47,75,80,.05); backdrop-filter: blur(14px); }
#blog-info { flex: 1; min-width: 0; }.nav-site-title { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; }.site-icon { width: 36px; height: 36px; object-fit: contain; border-radius: 7px; }.site-name { overflow: hidden; font-size: 17px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#menus { display: flex; align-items: center; gap: 8px; }.menus_items { display: flex; align-items: center; gap: 4px; }.menus_items .site-page { padding: 7px 12px; color: var(--ink); font-size: 14px; border-radius: 5px; transition: .2s ease; }.menus_items .site-page:hover,.menus_items .site-page.is-active { color: var(--accent); background: rgba(255,255,255,.58); }#page-header.not-top-img .menus_items .site-page { color: var(--ink); }#page-header.not-top-img .menus_items .site-page:hover,#page-header.not-top-img .menus_items .site-page.is-active { color: var(--accent); background: var(--soft-accent); }
#search-button { position: relative; display: flex; align-items: center; }#search-button input { width: 90px; padding: 7px 27px 7px 10px; border: 1px solid transparent; border-radius: 5px; outline: 0; color: var(--ink); background: rgba(255,255,255,.42); transition: .2s ease; }#search-button input:focus { width: 160px; border-color: rgba(19,130,150,.35); background: rgba(255,255,255,.7); }#search-button button { position: absolute; right: 6px; border: 0; color: var(--ink); background: transparent; font-size: 18px; }#page-header.not-top-img #search-button input { color: var(--ink); background: #f1f5f4; }#page-header.not-top-img #search-button input:focus { border-color: #a8d5da; background: #fff; }#page-header.not-top-img #search-button button { color: var(--muted); }
#toggle-menu { display: none; border: 0; color: inherit; background: transparent; font-size: 20px; }
#site-info { position: absolute; top: 49%; z-index: 1; width: 100%; padding: 0 20px; color: #fff; text-align: center; transform: translateY(-50%); }#site-title { margin: 0; font-size: clamp(38px,7vw,74px); line-height: 1.2; text-shadow: 2px 2px 4px rgba(0,0,0,.16); }#site-subtitle { margin-top: 8px; color: rgba(255,255,255,.82); font-size: 17px; }
#post-info { position: absolute; right: 0; bottom: 34px; left: 0; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px; color: #fff; }.post-title { margin: 0 0 7px; color: #fff; font-size: clamp(30px,5vw,52px); font-weight: 500; line-height: 1.25; }.post-meta-date,.post-meta-categories,.post-meta-pv,.post-meta-separator { color: rgba(255,255,255,.84); font-size: 13px; }.post-meta-categories a { color: #fff; }
#archive-info { position: absolute; right: 0; bottom: 40px; left: 0; z-index: 1; width: min(1200px, calc(100% - 48px)); margin: 0 auto; }.archive-title { margin: 0; color: #fff; font-size: clamp(30px,5vw,48px); font-weight: 500; line-height: 1.25; text-shadow: 1px 2px 4px rgba(0,0,0,.2); }
#post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Butterfly-style recent posts, cards and sidebar. */
#content-inner.layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; width: min(1200px,calc(100% - 30px)); padding: 40px 0 70px; margin: 0 auto; }#recent-posts { min-width: 0; }.recent-post-item,#post,#page,.card-widget { border-radius: 7px; background: var(--paper); box-shadow: var(--shadow); }.recent-post-item { display: flex; min-height: 190px; margin-bottom: 20px; overflow: hidden; transition: transform .2s ease,box-shadow .2s ease; }.recent-post-item:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(47,75,80,.12); }.recent-post-item .post_cover { flex: 0 0 38%; order: 2; }.recent-post-item .post_cover a,.recent-post-item .post_cover img { display: block; width: 100%; height: 100%; }.recent-post-item .post_cover img { object-fit: cover; }.recent-post-item .recent-post-info { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; padding: 28px 30px; }.recent-post-item.no-cover .recent-post-info { padding: 30px; }.article-title { margin: 0 0 5px; color: var(--ink-deep); font-size: 23px; line-height: 1.35; }.article-title a:hover { color: var(--accent); }.article-meta-wrap { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 12px; }.article-meta-wrap a { color: var(--accent); }.article-meta-separator { color: #b7c2c2; }.recent-post-info .content { display: -webkit-box; overflow: hidden; margin-top: 13px; color: var(--muted); font-size: 14px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#aside-content { min-width: 0; }.card-widget { position: relative; overflow: hidden; padding: 20px 24px; margin-bottom: 20px; }.card-info { text-align: center; }.avatar-img { width: 110px; height: 82px; margin: 0 auto 12px; }.avatar-img img { width: 100%; height: 100%; object-fit: contain; }.author-info-name { color: var(--ink-deep); font-size: 21px; font-weight: 600; }.author-info-description { margin-top: 2px; color: var(--muted); font-size: 13px; }.site-data { display: flex; justify-content: center; gap: 34px; margin-top: 18px; }.site-data span { display: flex; flex-direction: column; }.site-data b { color: var(--ink-deep); font-size: 18px; line-height: 1.2; }.site-data small { color: var(--muted); font-size: 11px; }.item-headline { padding-bottom: 9px; margin-bottom: 9px; border-bottom: 2px solid var(--ink-deep); color: var(--ink-deep); font-size: 15px; font-weight: 600; }.aside-list,.card-category-list { padding: 0; margin: 0; list-style: none; }.aside-list li { border-bottom: 1px dashed var(--line); }.aside-list li:last-child { border-bottom: 0; }.aside-list a,.card-category-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; color: var(--ink); font-size: 13px; }.aside-list a:hover,.card-category-list a:hover { color: var(--accent); }.aside-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.aside-list time { flex: 0 0 auto; color: var(--muted); font-size: 11px; }.card-category-list { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }.card-category-list a { padding: 5px 8px; border-radius: 4px; }.card-category-list a:hover { background: var(--soft-accent); }.card-category-list a span:last-child { color: var(--accent); }

/* Article container, Markdown presentation and post utilities. */
#post,#page { min-width: 0; padding: 42px 48px; }.post > #post-info { position: static; padding: 0 0 27px; margin-bottom: 22px; color: var(--ink); border-bottom: 1px solid var(--line); }.post > #post-info .post-title { color: var(--ink-deep); }.post > #post-info .post-meta-date,.post > #post-info .post-meta-categories,.post > #post-info .post-meta-pv,.post > #post-info .post-meta-separator { color: var(--muted); }.post > #post-info .post-meta-categories a { color: var(--accent); }.markdown-body { max-width: none; padding: 0; color: var(--ink); font-size: 16px; line-height: 1.95; overflow-wrap: anywhere; }.markdown-body > :first-child { margin-top: 0; }.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6 { margin: 2em 0 .7em; color: var(--ink-deep); line-height: 1.35; }.markdown-body h1 { padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 32px; }.markdown-body h2 { padding-left: 13px; border-left: 4px solid var(--accent); font-size: 27px; }.markdown-body h3 { font-size: 22px; }.markdown-body h4 { font-size: 19px; }.markdown-body p { margin: 1em 0; }.markdown-body a { color: var(--accent); border-bottom: 1px solid #a9d7db; }.markdown-body a:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }.markdown-body strong { color: var(--ink-deep); }.markdown-body blockquote { padding: 10px 18px; margin: 1.5em 0; border-left: 4px solid var(--warm); color: #697477; background: #fff8f1; }.markdown-body ul,.markdown-body ol { padding-left: 1.7em; }.markdown-body li::marker { color: var(--accent); }.markdown-body hr { height: 1px; margin: 2.5em 0; border: 0; background: var(--line); }.markdown-body img,.markdown-body video { display: block; max-width: 100%; height: auto; margin: 1.5em auto; border-radius: 5px; }.markdown-body code { padding: 2px 6px; color: #b05c36; background: #fff0e6; border-radius: 4px; font: .88em Consolas,"SFMono-Regular",monospace; }.markdown-body pre { overflow: auto; padding: 20px; margin: 1.5em 0; color: #d6e7e8; background: var(--code); border-radius: 6px; }.markdown-body pre code { padding: 0; color: inherit; background: transparent; font-size: .86em; line-height: 1.7; }.markdown-body table { width: 100%; margin: 1.5em 0; border-collapse: collapse; font-size: .92em; }.markdown-body th,.markdown-body td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }.markdown-body th { color: var(--ink-deep); background: var(--soft-accent); }.markdown-body input[type=checkbox] { accent-color: var(--accent); }
.post-copyright { padding: 15px 18px; margin-top: 30px; border-left: 3px solid var(--accent); color: var(--muted); background: var(--soft-accent); font-size: 12px; }.post-copyright div { display: flex; gap: 10px; margin: 3px 0; }.post-copyright span:first-child { flex: 0 0 56px; color: var(--ink); }.post-copyright a { overflow-wrap: anywhere; color: var(--accent); }.tag_share { padding: 20px 0 6px; }.post-meta__tag-list { display: flex; flex-wrap: wrap; gap: 7px; }.post-meta__tag-list a { padding: 2px 10px; color: var(--accent); background: var(--soft-accent); border-radius: 12px; font-size: 12px; }.post-pagination { justify-content: space-between; margin: 20px 0 40px; }.post-pagination a { display: inline-flex; max-width: 48%; overflow: hidden; padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--accent); text-overflow: ellipsis; white-space: nowrap; }.page-header { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }.page-title { margin: 0; color: var(--ink-deep); font-size: 31px; }
.comments { margin-top: 26px; border-top: 1px solid var(--line); }.comments-heading { display: flex; align-items: baseline; gap: 10px; padding-top: 24px; }.comments-heading h2 { margin: 0; color: var(--ink-deep); font-size: 22px; }.comments-heading span { color: var(--muted); font-size: 12px; }.comment-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }.comment-form textarea,.comment-fields input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; outline: 0; background: var(--paper); color: var(--ink); }.comment-form textarea { display: block; resize: vertical; }.comment-form textarea:focus,.comment-fields input:focus { border-color: #9acbd1; box-shadow: 0 0 0 3px rgba(19,130,150,.08); }.comment-form .button { margin-top: 12px; }.comment-list { margin: 24px 0 0; padding: 0; list-style: none; }.comment-list li { padding: 18px 0; border-top: 1px solid var(--line); }.comment-list .comment-author { color: var(--ink-deep); font-size: 14px; font-weight: 700; }.comment-list .comment-meta { color: var(--muted); font-size: 11px; }.comment-list .comment-content { color: var(--ink); font-size: 14px; }.comment-list .comment-reply { float: right; color: var(--accent); font-size: 12px; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 38px 0 12px; color: var(--muted); }.pagination a,.pagination .current { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }.pagination a:hover,.pagination .is-current a,.pagination .current a { color: #fff; background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }.pagination__prev a,.pagination__next a { min-width: 76px; color: var(--accent); border-color: var(--line); background: var(--paper); }
.article-sort { padding: 0 0 15px 25px; border-left: 2px solid #b8dfe1; }.article-sort-title { position: relative; padding: 0 0 8px 20px; margin: 0 0 12px -2px; color: var(--ink-deep); font-size: 25px; }.article-sort-title::before { position: absolute; top: 9px; left: -8px; width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 50%; background: var(--canvas); content: ''; }.article-sort-item { position: relative; display: flex; align-items: baseline; gap: 18px; padding: 10px 0 10px 20px; }.article-sort-item::before { position: absolute; top: 18px; left: -29px; width: 6px; height: 6px; border: 2px solid var(--accent); border-radius: 50%; background: var(--canvas); content: ''; }.article-sort-item time { flex: 0 0 40px; color: var(--muted); font-size: 12px; }.article-sort-item a { color: var(--ink); font-size: 15px; transition: .2s ease; }.article-sort-item a:hover { color: var(--accent); transform: translateX(4px); }.error-page { min-height: 300px; padding: 70px 30px; text-align: center; }.error-code { margin: 0; color: var(--accent); font: 70px/1 Georgia,serif; }.error-page h1 { margin: 15px 0 5px; color: var(--ink-deep); font-size: 28px; }.error-page > p:not(.error-code) { color: var(--muted); }.button { display: inline-flex; align-items: center; padding: 8px 15px; border: 0; border-radius: 5px; font-size: 13px; }.button--accent { color: #fff; background: var(--accent); }.button--accent:hover { background: var(--accent-dark); }
#card-toc .toc-content { max-height: 340px; overflow-y: auto; }.toc-content p { color: var(--muted); font-size: 12px; }.toc-content ol { padding-left: 18px; margin: 0; }.toc-content li { margin: 3px 0; color: var(--muted); font-size: 12px; }.toc-content .toc-level-3 { padding-left: 12px; }.toc-content a:hover { color: var(--accent); }
#footer { background: var(--accent); color: rgba(255,255,255,.82); }.footer-inner { display: flex; justify-content: space-between; gap: 28px; width: min(1200px,calc(100% - 30px)); padding: 30px 15px; margin: 0 auto; font-size: 12px; }.footer-inner p { margin: 0; }.footer-inner a { color: #fff; }.footer-main,.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }.footer-meta { justify-content: flex-end; color: rgba(255,255,255,.7); }.footer-meta a { color: rgba(255,255,255,.9); }
#rightside { position: fixed; right: 22px; bottom: 28px; z-index: 30; display: grid; gap: 6px; opacity: .86; }#rightside button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 5px; color: var(--accent); background: var(--paper); box-shadow: 0 6px 18px rgba(47,75,80,.1); transition: .2s ease; }#rightside button:hover { color: #fff; background: var(--accent); }#go-up { opacity: .75; }.reading-mode #aside-content,.reading-mode #page-header,.reading-mode #footer,.reading-mode #rightside { display: none !important; }.reading-mode #content-inner.layout { display: block; max-width: 860px; }.reading-mode #post,.reading-mode #page { margin: 0 auto; }
.reading-icon { position: relative; display: block; width: 16px; height: 14px; }.reading-icon::before,.reading-icon::after { position: absolute; top: 1px; width: 7px; height: 11px; border: 1.5px solid currentColor; content: ''; }.reading-icon::before { left: 0; border-right: 0; border-radius: 2px 0 0 2px; transform: skewY(7deg); }.reading-icon::after { right: 0; border-left: 0; border-radius: 0 2px 2px 0; transform: skewY(-7deg); }.reading-close { font-size: 20px; line-height: 1; }
body.dark-mode { --ink: #c1ced0; --ink-deep: #eef7f7; --muted: #91a3a6; --line: #35454a; --paper: #253236; --canvas: #182326; --soft-accent: #21444b; --shadow: 0 14px 40px rgba(0,0,0,.18); }body.dark-mode #page-header.not-top-img #nav { background: rgba(37,50,54,.94); }body.dark-mode #search-button input { background: #1d2a2e; }body.dark-mode .markdown-body blockquote { background: #3a3028; }body.dark-mode #rightside button { background: #253236; }body:not(.post) #reading-mode { display: none; }

/* Interaction details adapted from Butterfly. */
#blog-info .site-icon { width: 128px; height: 38px; border-radius: 0; }
.home #blog-info .nav-site-title { padding: 0; background: transparent; }
.card-info .avatar-img { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #eef3f2; }.card-info .avatar-img img { object-fit: cover; }
.recent-post-item .post_cover { overflow: hidden; }.recent-post-item .post_cover img { transition: transform .6s ease, filter .6s ease; }.recent-post-item:hover .post_cover img { transform: scale(1.08); filter: saturate(1.08); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }
#loading-box { position: fixed; inset: 0; z-index: 1000; pointer-events: auto; }.loading-left-bg,.loading-right-bg { position: absolute; top: 0; width: 50%; height: 100%; background: var(--accent); transition: transform .55s ease .15s; }.loading-left-bg { left: 0; }.loading-right-bg { right: 0; }.spinner-box { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }.spinner-box img { position: absolute; width: 150px; height: 48px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: .92; }.spinner-box > span { position: absolute; margin-top: 86px; color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }.configure-border { position: absolute; width: 86px; height: 86px; border: 2px solid rgba(255,255,255,.28); border-top-color: #fff; animation: configure-clockwise 1.5s linear infinite; }.configure-border-2 { border-color: rgba(255,255,255,.16); border-right-color: #8fd8d9; animation-direction: reverse; transform: rotate(45deg); }.configure-core { width: 100%; height: 100%; }.loading-box.loaded { pointer-events: none; }.loaded .loading-left-bg { transform: translateX(-100%); }.loaded .loading-right-bg { transform: translateX(100%); }.loaded .spinner-box { opacity: 0; transition: opacity .2s ease; }.is-loading { overflow: hidden; }@keyframes configure-clockwise { to { transform: rotate(360deg); } }
.article-container { max-width: none; }.markdown-body > h1:first-child { margin-top: 0; }.markdown-body pre::-webkit-scrollbar { height: 7px; }.markdown-body pre::-webkit-scrollbar-thumb { background: #55767b; border-radius: 4px; }
@media (max-width: 900px) { #content-inner.layout { display: block; padding: 24px 0 60px; } #aside-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } #aside-content .card-widget { margin: 0; } #aside-content .card-info { grid-column: 1 / -1; } }
@media (max-width: 700px) { #nav { padding: 0 16px; } #blog-info .site-icon { width: 128px; height: 38px; } #menus { gap: 2px; } .menus_items { position: absolute; top: 58px; right: 15px; left: 15px; display: none; flex-direction: column; align-items: stretch; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: var(--shadow); } .menus_items.is-open { display: flex; } .menus_items .site-page { color: var(--ink) !important; }#toggle-menu { display: block; }#search-button { display: none; }#page-header.full_page { min-height: 410px; height: 58vh; }#page-header.post-bg { height: 330px; }#page-header.archive-bg { height: 250px; }#post-info { padding: 0 16px; }#archive-info { width: calc(100% - 32px); bottom: 30px; }.post-title,.archive-title { font-size: 34px; }#post,#page { padding: 30px 22px; }.recent-post-item { display: block; }.recent-post-item .post_cover { width: 100%; height: 160px; }.recent-post-item .recent-post-info,.recent-post-item.no-cover .recent-post-info { padding: 23px; }#aside-content { display: block; }#aside-content .card-widget { margin-bottom: 18px; }.comment-fields { grid-template-columns: 1fr; }.article-sort { padding-left: 20px; }.article-sort-item { display: block; padding-left: 15px; }.article-sort-item time { display: block; }.article-sort-item::before { left: -24px; }.footer-inner { display: block; padding: 25px 20px; }.footer-main,.footer-meta { justify-content: center; gap: 8px 14px; text-align: center; }#rightside { right: 15px; bottom: 18px; }.markdown-body { font-size: 15px; }.markdown-body h1 { font-size: 27px; }.markdown-body h2 { font-size: 23px; }.markdown-body h3 { font-size: 20px; }.spinner-box img { width: 122px; }.spinner-box > span { margin-top: 76px; }.pagination { gap: 10px; margin-top: 30px; } }
body.dark-mode #nav { color: #e7f1f2; background: rgba(28,43,47,.76); border-bottom-color: rgba(255,255,255,.16); }
body.dark-mode #nav .menus_items .site-page { color: #dbe9ea; }
body.dark-mode #nav .menus_items .site-page:hover, body.dark-mode #nav .menus_items .site-page.is-active { color: #fff; background: rgba(19,130,150,.35); }
body.dark-mode #nav #search-button input { color: #e7f1f2; background: rgba(20,34,38,.58); }
body.dark-mode #nav #search-button button { color: #dbe9ea; }
body.dark-mode #page-header.full_page::after { position: absolute; inset: 0; z-index: 0; background: rgba(8,27,28,.3); content: ''; pointer-events: none; }
body.reading-mode #rightside { display: grid !important; }
body.reading-mode #reading-mode { color: #fff; background: var(--accent); }
body.reading-mode #reading-mode:hover { background: var(--accent-dark); }
#loading-box { display: none !important; }
#loading-box.loaded { pointer-events: none; }
#recent-posts.archive-results { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
#archive .article-sort { padding: 30px 30px 30px 55px; border-left: 2px solid #b8dfe1; border-radius: 7px; background: var(--paper); box-shadow: var(--shadow); }
#recent-posts .recent-post-item { height: 230px; max-height: 230px; }
#recent-posts .recent-post-item .recent-post-info { overflow: hidden; }
#recent-posts .recent-post-item .post_cover { height: 230px; max-height: 230px; align-self: flex-start; }
@media (max-width: 700px) { #recent-posts .recent-post-item { height: auto; max-height: none; } #recent-posts .recent-post-item .post_cover { height: 160px; max-height: 160px; } }
#post .post-pagination { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: stretch; }
#post .post-pagination > span { display: block; min-width: 0; }
#post .post-pagination > span a { display: flex; width: 100%; max-width: none; min-height: 42px; align-items: center; justify-content: center; overflow-wrap: anywhere; white-space: normal; }
#recent-posts > .pagination { gap: 0; }
#recent-posts > .pagination > .page-navigator { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#recent-posts > .pagination > .page-navigator > span { display: inline-flex; }
#post > .post-pagination { gap: 16px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }.tag-cloud a { padding: 3px 9px; color: var(--accent); background: var(--soft-accent); border-radius: 12px; font-size: 12px; transition: .2s ease; }.tag-cloud a:hover { color: #fff; background: var(--accent); transform: translateY(-1px); }
#site-subtitle.is-typing::after { content: '_'; margin-left: 2px; color: currentColor; animation: title-cursor .8s steps(1) infinite; }
#page-header #post-info { max-width: 1200px; }