:root {
  color-scheme: dark;
  --ink: #101b2a;
  --paper: #e7e6de;
  --quiet: #a8b3bd;
  --dim: #96a5b2;
  --line: #384553;
  --active: #fff9e9;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, "Diary UI Serif", "Noto Serif SC Variable", Georgia, serif;
  overflow-y: scroll;
  font-family: var(--serif);
  background: var(--ink);
  color: var(--paper);
  font-synthesis: style;
}
@supports (scrollbar-gutter: stable) {
  :root { overflow-y: auto; scrollbar-gutter: stable; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-size: 17px; line-height: 1.75; -webkit-text-size-adjust: 100%; }
::selection { background: #455869; color: #fff; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a:hover, button:hover { color: var(--active); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; }
button, input, textarea { font: inherit; color: inherit; background: transparent; }
button { padding: 0; border: 0; cursor: pointer; }
button[disabled] { opacity: .55; cursor: wait; }
input, textarea { border: 0; border-radius: 0; }
::placeholder { color: var(--dim); opacity: .85; }
:focus-visible { outline: 1px solid var(--quiet); outline-offset: 5px; }
.page { width: min(46rem, calc(100% - 5rem)); margin: 0 auto; padding: clamp(60px, 11vh, 108px) 0 12vh; padding-top: clamp(60px, 11svh, 108px); }
.masthead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-block; font-size: 2.85rem; line-height: 1.2; letter-spacing: .15em; font-weight: 560; }
.brand:hover { text-decoration: none; }
nav, .links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 1.35rem; color: var(--quiet); font-size: .91rem; }
nav a, nav button, .links a, .links button { padding: 5px 0; }
nav .current { color: var(--paper); text-decoration: underline; text-underline-offset: .35em; }
main { min-width: 0; padding-top: clamp(40px, 6vh, 62px); padding-top: clamp(40px, 6svh, 62px); }
main:focus { outline: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 570; margin: 0; }
h1 { font-size: clamp(1.8rem, 5vw, 2.25rem); line-height: 1.48; letter-spacing: .025em; overflow-wrap: anywhere; }
.archive-year { font-size: 1.65rem; letter-spacing: .06em; font-weight: 480; margin-bottom: .8rem; font-variant-numeric: lining-nums; }
.archive + .archive { margin-top: 2.8rem; }
.entry-row { display: grid; grid-template-columns: 13.5rem minmax(0,1fr); gap: 1rem; align-items: baseline; margin: 0; padding: .64rem 0; }
.archive > .entry-row:first-of-type { padding-top: .512rem; }
.entry-row time { color: var(--dim); font-size: 1.365rem; white-space: nowrap; }
.entry-row a { font-size: 1.83rem; line-height: 1.5; overflow-wrap: anywhere; }
.entry-main { min-width: 0; }
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.entry-author { color: var(--dim); font-size: 1rem; white-space: nowrap; }
.entry-snippet { margin: .28rem 0 .1rem; color: var(--quiet); font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere; }
.search-hit { background: rgba(255, 243, 196, .18); color: var(--active); padding: .04em .2em; border-radius: 3px; }
.entry-main { min-width: 0; }
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.entry-author { color: var(--dim); font-size: 1rem; white-space: nowrap; }
.entry-snippet { margin: .28rem 0 .1rem; color: var(--quiet); font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere; }
.search-hit { background: rgba(255, 243, 196, .18); color: var(--active); padding: .04em .2em; border-radius: 3px; }
.empty, .notice { color: var(--quiet); margin: 0; }
.section-title { font-size: 1.45rem; margin: 0 0 1.7rem; }
.pagination { margin-top: 2.5rem; }
.search-form { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2.5rem; }
.search-form input { flex: 1; min-width: 0; }
.search-form button { white-space: nowrap; }
.line-input { display: block; width: 100%; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.line-input:focus { border-color: var(--quiet); outline: none; }
.login-form { max-width: 23rem; }
.login-form label { display: block; color: var(--quiet); margin: .3rem 0; }
.login-form button { margin-top: 1.25rem; }
.notice:not(:empty) { margin-top: 1.25rem; }
.notice[role=alert]:not(:empty) { color: #e4bdb0; }
.meta { display: flex; flex-wrap: wrap; gap: .9em; color: var(--dim); font-size: .88rem; margin: 0 0 .65rem; }
.article-title { margin-bottom: 2rem; }
.entry-controls { margin-top: 3rem; }
.confirm { margin-top: 1rem; }
.confirm button { margin-left: 1.2rem; }
.prose { line-height: 1.98; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 1.1em 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin: 1.6em 0 .55em; line-height: 1.55; }
.prose h1 { font-size: 1.75em; }
.prose h2 { font-size: 1.4em; }
.prose h3 { font-size: 1.2em; }
.prose a { color: #cfdee7; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .23em; }
.prose img { display: inline-block; max-width: 100%; height: auto; }
.prose blockquote { margin: 1.4em 0; padding-left: 1em; border-left: 2px solid var(--line); color: #c2cbd1; }
.prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.prose code, .prose pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86em; }
.prose pre { margin: 1.4em 0; padding: .35em 0 .35em 1em; border-left: 1px solid var(--line); overflow-x: auto; white-space: pre; line-height: 1.65; }
.prose pre code { font-size: 1em; }
.prose :is(ol,ul) { padding-left: 1.6em; }
.prose .contains-task-list { list-style: none; }
.prose .task-list-item-checkbox { margin: 0 .5em 0 -1.15em; accent-color: #c3d1dc; }
.prose dl { margin: 1.15em 0; }
.prose dt { font-weight: 600; }
.prose dd { margin-left: 1.5em; }
.prose table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 1.3em 0; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .35em .9em; }
.prose .footnotes { font-size: .9em; }
.prose .math-display { display: block; overflow-x: auto; }
.prose .math-inline { white-space: normal; }
mjx-container[jax=SVG] { max-width: 100%; }
.prose .math-display mjx-container { min-width: min-content; }
.editor-form { display: grid; gap: 1.45rem; }
.editor-title { font-size: clamp(1.8rem, 5vw, 2.25rem); line-height: 1.5; width: 100%; padding: 0; }
.editor-title:focus, .editor-body:focus { outline: none; }
.editor-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .65rem 1.7rem; color: var(--quiet); font-size: .9rem; }
.editor-meta input { color: var(--quiet); padding: .22rem 0; max-width: 100%; }
.editor-body, .editor-preview { min-width: 0; width: 100%; min-height: 44vh; min-height: 44svh; line-height: 1.98; padding: .65rem 0; }
.editor-body { display: block; resize: vertical; }
.editor-actions { padding-top: .75rem; border-top: 1px solid var(--line); }
.primary-action { color: var(--paper); }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: absolute; top: 8px; left: 12px; }
@media (max-width: 600px) {
  body { font-size: 16px; }
  .page { width: calc(100% - 2.7rem); padding-top: 42px; }
  .masthead { padding-bottom: 17px; gap: 12px 15px; }
  .brand { font-size: 2.25rem; }
  nav, .links { gap: 4px 1rem; }
  nav { font-size: .875rem; }
  .editor-meta input, .line-input, .editor-body { font-size: max(1rem, 16px); }
  main { padding-top: 36px; }
  .entry-row { grid-template-columns: 1fr; gap: .2rem; }
  .entry-row time { font-size: 1.2rem; }
  .entry-row a { font-size: 1.68rem; }
}
.password-field { display: flex; align-items: baseline; gap: .8rem; }
.password-field input { flex: 1; min-width: 0; }
.password-field button { white-space: nowrap; font-size: .9rem; margin-top: 0; }
.account-page { --panel: #15243a; --panel-line: #2c3a4a; --ok: #a9d1b4; --warn: #e4bdb0; }
.account-header { margin-bottom: 2.2rem; }
.account-header .section-title { margin: 0; }
.account-handle { margin: .1rem 0 0; color: var(--dim); font-size: .95rem; letter-spacing: .02em; }
.account-section { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 1.5rem 1.6rem 1.3rem; }
.account-section + .account-section { margin-top: 1.6rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .8rem; }
.section-head h2 { font-size: 1.3rem; letter-spacing: .04em; }
.section-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3em; padding: .22rem .85rem; border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; line-height: 1.6; white-space: nowrap; color: var(--quiet); transition: border-color .15s, color .15s, background-color .15s; }
.btn:hover { text-decoration: none; border-color: var(--quiet); color: var(--active); }
.btn-primary { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.btn-primary:hover { color: var(--ink); background: var(--active); border-color: var(--active); }
.btn-danger { color: var(--warn); border-color: #5b4545; }
.btn-danger:hover { color: #ffd9cc; border-color: var(--warn); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.settings-table, .data-table { width: 100%; border-collapse: collapse; }
.settings-table th, .settings-table td, .data-table th, .data-table td { padding: .7rem .5rem; border-top: 1px solid var(--panel-line); text-align: left; vertical-align: middle; }
.settings-table tr:first-child > *, .data-table thead th { border-top: 0; }
.settings-table th:first-child, .data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.settings-table td:last-child, .data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.settings-table th { width: 7rem; font-weight: 500; color: var(--quiet); }
.setting-value { overflow-wrap: anywhere; }
td.row-actions, th.row-actions { text-align: right; white-space: nowrap; width: 1%; }
.row-actions .btn + .btn { margin-left: .4rem; }
.data-table thead th { font-weight: 500; font-size: .8rem; letter-spacing: .08em; color: var(--dim); padding-top: 0; }
.data-table td.muted { color: var(--dim); font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.key-name { overflow-wrap: anywhere; }
.key-prefix { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; padding: .12rem .45rem; border-radius: 6px; background: rgba(255,255,255,.05); color: var(--quiet); white-space: nowrap; }
.data-table tr.is-new { animation: key-new 2.4s ease-out; }
@keyframes key-new { from { background: rgba(231,230,222,.12); } to { background: transparent; } }
.empty-row td { color: var(--dim); text-align: center; padding: 1.4rem 0; }
.table-wrap { overflow-x: auto; }
.badge { display: inline-block; padding: .05rem .6rem; border-radius: 999px; font-size: .82rem; border: 1px solid var(--line); color: var(--dim); }
.badge-ok { color: var(--ok); border-color: #3c5a4a; }
.editor-row > td { padding: .2rem 0 1.1rem !important; border-top: 0 !important; }
.inline-form { display: grid; gap: .8rem; max-width: 30rem; padding: 1rem 1.1rem; border-radius: 10px; background: rgba(0,0,0,.18); }
.field { display: grid; gap: .15rem; }
.field-label { color: var(--quiet); font-size: .86rem; }
.field-hint { color: var(--dim); font-size: .82rem; margin: -.3rem 0 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.account-page .notice:not(:empty) { margin-top: .8rem; }
.account-page .notice[role=alert]:not(:empty) { color: var(--ok); }
.account-page .notice.is-error:not(:empty) { color: var(--warn); }
.key-create { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--panel-line); }
.key-create input { flex: 1; min-width: 0; }
.rename-form { display: flex; align-items: center; gap: .4rem; }
.rename-form input { min-width: 6rem; padding: .2rem 0; }
.revoked-keys { margin-top: 1.1rem; color: var(--dim); font-size: .88rem; }
.revoked-keys summary { cursor: pointer; width: fit-content; }
.revoked-keys summary:hover { color: var(--quiet); }
.data-table.is-muted td { color: var(--dim); font-size: .85rem; padding: .5rem .5rem; }
.recovery-codes { margin-top: 1.2rem; padding: 1rem 1.2rem; border: 1px solid #5b5240; border-radius: 10px; background: rgba(228,200,150,.05); }
.recovery-codes h3 { font-size: 1.05rem; }
.recovery-codes ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .3rem 1.2rem; margin: .8rem 0 1rem; padding-left: 1.4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
.totp-setup { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.totp-setup > div { flex: 1; min-width: 12rem; display: grid; gap: .7rem; }
.totp-qr { display: block; border-radius: 8px; background: #fff; max-width: 100%; height: auto; }
.totp-manual { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.totp-manual .field-hint { margin: 0; }
.totp-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; overflow-wrap: anywhere; }
.verify-dialog { width: min(24rem, calc(100vw - 2rem)); padding: 1.6rem 1.7rem 1.4rem; border: 1px solid var(--panel-line); border-radius: 14px; background: var(--panel); color: var(--paper); }
.verify-dialog::backdrop { background: rgba(6,12,20,.68); backdrop-filter: blur(2px); }
.verify-dialog form { display: grid; gap: .9rem; }
.verify-dialog h2 { font-size: 1.25rem; }
.verify-dialog .notice { font-size: .86rem; color: var(--dim); margin: -.4rem 0 0; }
.verify-dialog .notice[role=alert]:not(:empty) { margin: 0; color: var(--warn); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
@media (max-width: 600px) {
  .account-section { padding: 1.2rem 1.1rem 1rem; border-radius: 12px; }
  .settings-table th { width: 4.5rem; }
  .settings-table td.row-actions { white-space: normal; }
  .settings-table .row-actions .btn { margin: .12rem 0 .12rem .3rem; }
  .data-table thead { display: none; }
  .data-table tr { display: block; padding: .75rem 0; border-top: 1px solid var(--panel-line); }
  .data-table tbody tr:first-child { border-top: 0; }
  .data-table td { display: flex; align-items: baseline; gap: .75rem; border: 0 !important; padding: .18rem 0 !important; }
  .data-table td[data-label]::before { content: attr(data-label); width: 4.5rem; flex: none; color: var(--dim); font-size: .8rem; }
  .data-table td.key-name { font-size: 1.05rem; margin-bottom: .15rem; }
  .data-table td.key-name::before { content: none; }
  .data-table td.row-actions { padding-top: .5rem !important; text-align: left; }
  .row-actions .btn + .btn { margin-left: .3rem; }
  .key-create { flex-wrap: wrap; }
  .key-create input { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .masthead { align-items: flex-start; flex-direction: column; }
  #navigation { min-height: 2rem; }
  .account-page input { font-size: 16px; }
}