:root {
    --gap: 24px;
    --content-gap: 20px;
    --nav-width: 1024px;
    --main-width: 1024px;
    --header-height: 60px;
    --footer-height: 84px;
    --radius: 8px;
    --theme: rgb(255, 255, 255);
    --entry: rgb(245, 245, 245);
    --primary: rgb(30, 30, 30);
    --secondary: rgb(108, 108, 108);
    --tertiary: rgb(214, 214, 214);
    --content: rgb(31, 31, 31);
    --code-bg: rgb(245, 245, 245);
    --border: rgb(238, 238, 238);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --theme: rgb(29, 30, 32);
    --entry: rgb(46, 46, 51);
    --primary: rgb(218, 218, 219);
    --secondary: rgb(155, 156, 157);
    --tertiary: rgb(65, 66, 68);
    --content: rgb(196, 196, 197);
    --code-bg: rgb(55, 56, 62);
    --border: rgb(51, 51, 51);
    color-scheme: dark;
}

*, ::after, ::before { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; overflow-y: scroll; }
a, button, body, h1, h2, h3, h4, h5, h6 { color: var(--primary); transition: background .4s ease-out; }
body { margin: 0; font-family: LXGWWenKai, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.6; word-break: break-word; background: var(--theme); }
body.list { background: var(--theme); background-image: linear-gradient(var(--entry) 1px, transparent 0), linear-gradient(90deg, var(--entry) 1px, transparent 0); background-size: 25px 25px; background-repeat: repeat; }
article, aside, figcaption, figure, footer, header, main, nav, section, table { display: block; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
ul { padding: 0; margin: 0; }
a { text-decoration: none; }
button, input, textarea { padding: 0; font: inherit; background: 0 0; border: 0; }
input, textarea { outline: 0; }
button { cursor: pointer; }

.header-nav { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: calc(var(--nav-width) + var(--gap) * 2); margin: auto; line-height: var(--header-height); padding: 0 var(--gap); column-gap: var(--gap); }
.header-nav a { display: block; }
.logo, .menu { display: flex; }
.logo { align-items: center; column-gap: .55rem; flex-wrap: wrap; text-shadow: grey .2em .2em .2em; }
.logo a { font-size: 24px; font-weight: 700; display: flex; align-items: center; column-gap: .55rem; }
.logo-switches { display: inline-flex; gap: .4rem; align-items: inherit; min-height: stretch; flex-wrap: inherit; }
.logo-switches > * { min-height: inherit; align-items: center; display: inline-flex; }
.theme-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: transparent;
    border: 1px solid transparent;
    vertical-align: middle;
}
.theme-toggle:hover {
    background: var(--entry);
    border-color: var(--border);
}
.theme-toggle svg { display: block; }
[data-theme="dark"] .moon { display: none; }
[data-theme="light"] .sun { display: none; }
.menu { list-style: none; word-break: keep-all; overflow-x: auto; white-space: nowrap; column-gap: var(--gap); align-items: center; text-shadow: grey .1em .1em .2em; }
.menu a { font-size: 20px; }
.menu .active { font-weight: 500; text-decoration: underline; text-underline-offset: .3rem; text-decoration-thickness: 2px; }

.main { position: relative; min-height: calc(100vh - var(--header-height) - var(--footer-height)); max-width: calc(var(--main-width) + var(--gap) * 2); margin: auto; padding: var(--gap); letter-spacing: 1px; }
.first-entry { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 320px; margin: var(--gap) 0 calc(var(--gap) * 2); overflow: hidden; padding: 8px 0; }
.first-entry .entry-header { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.first-entry .entry-header h1 { font-size: 34px; line-height: 1.3; }
.first-entry .entry-content { margin: 14px 0; font-size: 16px; -webkit-line-clamp: 3; }
.first-entry .entry-footer { font-size: 14px; }
.home-info .entry-content { -webkit-line-clamp: unset; margin: 0; }
.home-info .entry-content p { margin-block-start: 1em; margin-block-end: 1em; }
.social-icons { padding: 12px 0; }
.social-icons a:not(:last-of-type) { margin-inline-end: 12px; }

.post-entry { position: relative; margin-bottom: var(--gap); padding: var(--gap); background: var(--theme); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 0 6px rgba(0,0,0,.08); transition: transform .1s, box-shadow .3s ease; overflow: hidden; }
.post-entry:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.entry-header h2 { font-size: 20px; line-height: 1.3; }
.entry-content { margin: 8px 0; color: var(--secondary); font-size: 14px; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.entry-footer { color: var(--secondary); font-size: 13px; }
.entry-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

.home-widgets { display: flex; flex-direction: column; gap: 1.25rem; margin: 0 0 2rem; }
.home-recent-posts, .home-recent-memos { margin: 0; padding: 1.25rem 1.5rem 1rem; background: var(--theme); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 6px rgba(0,0,0,.04); transition: background .4s ease-out, box-shadow .2s ease, border-color .2s ease; }
.home-recent-posts:hover, .home-recent-memos:hover { border-color: var(--tertiary); box-shadow: 0 4px 18px rgba(0,0,0,.10); }
.hrm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.hrm-title { display: flex; align-items: center; gap: .4rem; font-size: 1rem; font-weight: 600; color: var(--primary); margin: 0; padding: 0; border: none; letter-spacing: 0; }
.hrm-view-all { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; color: var(--secondary); padding: .25rem .65rem; border: 1px solid var(--border); border-radius: 20px; white-space: nowrap; }
.hrm-view-all:hover { color: var(--primary); border-color: var(--primary); background: var(--entry); }
.hrp-feed { display: flex; flex-direction: column; gap: 0; }
.hrp-item { margin-bottom: 0; padding: .75rem .25rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; background: transparent; transition: background .15s ease; }
.hrp-item:hover { background: var(--entry); box-shadow: none; transform: none; }
.hrp-item:last-child { border-bottom: none; padding-bottom: 0; }
.hrp-item:first-child { padding-top: 0; }
.hrp-item .entry-header h2 { display: -webkit-box; font-size: .88rem; font-weight: 600; line-height: 1.4; margin-bottom: .2rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hrp-item .entry-footer { display: flex; align-items: center; gap: .25rem; font-size: .72rem; margin-bottom: .2rem; }
.hrp-item .entry-content { font-size: .8rem; line-height: 1.5; margin: 0; -webkit-line-clamp: 1; }

.hrm-feed { display: flex; flex-direction: column; gap: 0; position: relative; }
.hrm-feed::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.hrm-item { display: flex; gap: .85rem; position: relative; padding-bottom: .85rem; }
.hrm-item:last-child { padding-bottom: 0; }
.hrm-item-dot { flex-shrink: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--theme); border: 2px solid var(--secondary); margin-top: .35rem; position: relative; z-index: 1; }
.hrm-item-body { flex: 1; min-width: 0; position: relative; background: var(--entry); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .55rem .8rem .5rem; transition: box-shadow .15s, border-color .15s; }
.hrm-item:hover .hrm-item-body { border-color: var(--secondary); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.hrm-item:hover .hrm-item-dot { border-color: var(--primary); }
.hrm-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; margin-bottom: .3rem; }
.hrm-item-time { font-size: .74rem; color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrm-item-content { font-size: .875rem; line-height: 1.65; color: var(--content); word-break: break-word; }
.hrm-item-content p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.page-header, .post-header { margin: 24px auto var(--content-gap); }
.post-title { margin-bottom: 2px; font-size: 40px; text-shadow: grey .1em .1em .1em; }
.post-meta, .breadcrumbs { color: var(--secondary); font-size: 14px; display: flex; flex-wrap: wrap; }
.breadcrumbs a { font-size: 16px; }
.post-content { margin: 20px 0 0; color: var(--content); background-color: var(--theme); padding: 24px; border-radius: var(--radius); box-shadow: 0 0 6px grey; transition: background .4s ease-out; font-size: 1.0625rem; letter-spacing: .013rem; line-height: 2; }
.post-content h2 { margin: 32px auto 24px; font-size: 32px; }
.post-content h3 { margin: 24px 0 16px; font-size: 24px; }
.post-content p { margin-bottom: var(--content-gap); }
.post-content a { text-decoration: underline; text-underline-offset: .3rem; }
.post-content code { margin: auto 4px; padding: 4px 6px; font-size: .78em; line-height: 1.5; background: var(--code-bg); border-radius: 2px; }
.post-content pre { position: relative; margin: 10px auto; background: rgb(28,29,33); border-radius: var(--radius); overflow-x: auto; }
.post-content pre code { display: block; margin: 0; padding: 12px; color: #d5d5d6; background: transparent; }
.copy-code { display: none; position: absolute; top: 4px; right: 4px; color: rgba(255,255,255,.8); background: rgba(78,78,78,.8); border-radius: var(--radius); padding: 0 8px; font-size: 14px; }
pre:hover .copy-code { display: block; }
.toc { margin-bottom: var(--content-gap); background: var(--code-bg); border-radius: var(--radius); border: 1px solid var(--border); }
.toc summary { padding: .3rem 1.2rem; cursor: pointer; }
.toc .inner { margin: 0 2.4rem; padding-bottom: .6rem; }
.toc ul { list-style: none; }
.toc a { color: var(--secondary); font-size: 14px; }
.toc-level-3 { margin-inline-start: var(--gap); }
.post-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.post-tags a, .share-buttons { border-radius: var(--radius); background: var(--code-bg); border: 1px solid var(--border); }
.post-tags a { display: block; padding: 0 14px; color: var(--secondary); font-size: 14px; line-height: 34px; }
.share-buttons { padding: 10px; display: flex; justify-content: center; gap: 10px; overflow-x: auto; }
.share-buttons a { text-decoration: none; color: var(--secondary); }
.terms-tags { text-align: center; }
.terms-tags li { display: inline-block; margin: 10px; font-weight: 500; }
.terms-tags a { display: block; padding: 3px 10px; border-radius: 30px; transition: transform .5s; }
.terms-tags a:hover { transform: scale(1.2); }
.terms-tags sup { margin-left: 4px; color: var(--secondary); }
.archive-year { margin-top: 40px; color: var(--content); background-color: var(--theme); padding: 20px; border-radius: var(--radius); box-shadow: 0 0 6px grey; }
.archive-entry { position: relative; padding: 12px 5px; border-bottom: 1px solid var(--border); }
.archive-meta { color: var(--secondary); font-size: 14px; }
.searchbox input { padding: 10px 14px; width: 100%; color: var(--primary); font-weight: 700; border: 2px solid var(--tertiary); border-radius: var(--radius); background: var(--theme); margin-bottom: var(--gap); }
.top-link { position: fixed; bottom: 60px; right: 30px; z-index: 99; background: var(--tertiary); width: 42px; height: 42px; padding: 12px; border-radius: 64px; transition: visibility .3s, opacity .3s; color: var(--secondary); }
.hidden { visibility: hidden; opacity: 0; }

.admin-shell { max-width: 1180px; margin: 24px auto 48px; }
.admin-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 24px; background: var(--theme); border: 1px solid var(--border); border-radius: calc(var(--radius) + 8px); box-shadow: 0 12px 34px rgba(0,0,0,.10); }
.admin-hero h1 { font-size: 34px; margin: 4px 0 8px; }
.eyebrow { color: var(--secondary); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.admin-toolbar { display: flex; align-items: center; gap: 10px; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; color: var(--secondary); font-size: 14px; }
input, textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--entry); color: var(--primary); padding: 10px 12px; }
input:focus, textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 18%, transparent); }
button { border-radius: var(--radius); background: var(--primary); color: var(--theme); padding: 8px 14px; }
.ghost { background: var(--entry); color: var(--primary); border: 1px solid var(--border); }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.admin-stats div { background: linear-gradient(135deg, var(--theme), var(--entry)); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); padding: 18px; display: grid; gap: 2px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.admin-stats strong { font-size: 32px; line-height: 1.1; }
.admin-stats span, .admin-stats small { color: var(--secondary); font-size: 13px; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); gap: 22px; align-items: start; }
.admin-maincol, .admin-sidecol { display: grid; gap: 22px; }
.admin-card { background: var(--theme); border: 1px solid var(--border); border-radius: calc(var(--radius) + 8px); padding: 20px; box-shadow: 0 10px 26px rgba(0,0,0,.09); }
.editor-card textarea[name="body"] { min-height: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.7; }
.card-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.card-title h2 { font-size: 20px; }
.card-title > span { color: var(--secondary); font-size: 13px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.edit-form { max-width: 960px; margin: 0 auto; }
.compact-list { list-style: none; border-top: 1px solid var(--border); }
.compact-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.compact-list strong { display: block; line-height: 1.4; }
.compact-list span, .muted { color: var(--secondary); font-size: 13px; }
.row-actions { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.row-actions form { margin: 0; }
.danger { background: #b42318; color: #fff; padding: 4px 8px; font-size: 12px; }
.checkbox { display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: center; gap: 8px; }
.checkbox input { width: auto; }
.button-link { display: inline-flex; align-items: center; border-radius: var(--radius); padding: 8px 14px; border: 1px solid var(--border); }
.notice { padding: 14px 16px; border: 1px solid var(--border); background: var(--entry); border-radius: var(--radius); }
.entry-cover { font-size: 14px; margin-bottom: var(--gap); text-align: center; display: flex; flex-direction: column; gap: .5rem; }
.entry-cover img { border-radius: var(--radius); width: 100%; max-height: 360px; object-fit: cover; box-shadow: 0 2px 14px rgba(0,0,0,.12); }
.related { margin-top: 42px; }
.related h2 { margin-bottom: var(--content-gap); }
.comments, .comments-placeholder { margin-top: 42px; padding: 18px; background: var(--theme); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 0 6px rgba(0,0,0,.08); }
.post-content blockquote { margin: 24px 0; padding: 12px 18px; border-inline-start: 3px solid var(--primary); background: var(--entry); border-radius: var(--radius); }
.post-content figure { margin: 24px 0; }
.post-content figure img { border-radius: var(--radius); box-shadow: 4px 4px 12px gray; margin: auto; }
.post-content figcaption { color: var(--secondary); font-size: 14px; text-align: center; margin-top: 8px; }
.collapse { margin: 16px 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--entry); }

.footer { max-width: calc(var(--main-width) + var(--gap) * 2); margin: auto; padding: calc((var(--footer-height) - var(--gap)) / 4) var(--gap); text-align: center; line-height: 24px; font-size: 12px; color: var(--secondary); }
.footer span { margin-inline-start: 1px; margin-inline-end: 1px; }
.footer span:last-child { white-space: nowrap; }
.footer a { color: inherit; border-bottom: 1px solid var(--secondary); }
.footer a:hover { color: var(--primary); border-bottom: 1px solid var(--primary); }

@media screen and (max-width: 768px) {
    :root { --gap: 14px; }
    .header-nav { line-height: 48px; }
    .logo a { font-size: 21px; }
    .menu { column-gap: 14px; width: 100%; justify-content: flex-start; padding-bottom: 6px; }
    .menu a { font-size: 18px; }
    .first-entry { min-height: 260px; }
    .home-recent-posts, .home-recent-memos, .post-content { padding: 16px; }
    .post-title { font-size: 32px; }
    .admin-hero, .admin-toolbar { flex-direction: column; align-items: stretch; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-stats { grid-template-columns: 1fr; }
    .field-grid { grid-template-columns: 1fr; }
    .compact-list li { align-items: flex-start; flex-direction: column; }
    .footer { padding: calc((var(--footer-height) - var(--gap) - 10px) / 2) var(--gap); }
}