@font-face {
  font-family: "Butterfly WenKai";
  src: url("./fonts/LXGWWenKai-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Butterfly Copperplate";
  src: url("./fonts/PinyonScript-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

#agent-admin-exit[hidden],
#agent-document-toggle[hidden],
#agent-history-panel[hidden],
#agent-site-settings[hidden],
#agent-history-preview[hidden] { display: none !important; }
#agent-inline-edit-tools[hidden] { display: none !important; }
.agent-title-card[hidden] { display: none !important; }
body:not(.is-agent-admin) #agent-document-toggle,
body:not(.is-agent-admin) .style-panel { display: none !important; }

#agent-admin-login {
  color: #eeeae1;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  border-top-color: rgba(255, 255, 255, .34);
  border-bottom-color: rgba(255, 255, 255, .12);
  border-radius: 0;
  width: min(420px, calc(100vw - 48px), calc(100dvh - 48px));
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, .018),
    5px 5px 0 -1px rgba(255, 255, 255, .025);
  user-select: text;
}
#agent-admin-login::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, .045);
  pointer-events: none;
}
#agent-admin-login::backdrop { background: rgba(0, 0, 0, .08); }
#agent-admin-login-form { position: absolute; inset: 0; margin: 0; }
#agent-admin-login .admin-eyebrow,
#agent-admin-login h2,
#agent-admin-login label,
#agent-admin-login .admin-login-actions {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#agent-admin-password {
  position: absolute;
  left: 19%;
  top: 50%;
  transform: translateY(-100%);
  width: 62%;
  color: rgba(255, 255, 255, .95);
  caret-color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0;
  padding: 10px 4px;
  outline: none;
  box-shadow: none;
  text-align: center;
  letter-spacing: .25em;
  font: 22px/1.4 "Butterfly WenKai", sans-serif;
  transition: border-color .18s ease;
}
#agent-admin-password:focus-visible {
  outline: none;
  border-bottom-color: rgba(255, 255, 255, .85);
}
#agent-admin-login-status {
  position: absolute;
  top: calc(50% + 16px);
  left: 12%;
  width: 76%;
  margin: 0;
  color: rgba(238, 234, 225, .72);
  text-align: center;
  font: 12px/1.6 "Butterfly WenKai", sans-serif;
}
#agent-admin-login-status:empty { display: none; }
#agent-admin-exit {
  z-index: 11000;
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  font: 12px/1 Consolas, monospace;
  letter-spacing: .14em;
  background: #111c;
  color: #e3dece;
  border: 1px solid #8a8474;
  border-radius: 999px;
  padding: 11px 21px;
  cursor: pointer;
}
#agent-admin-exit:hover { background: #e3dece; color: #111; }
#agent-admin-exit:disabled { opacity: .5; cursor: wait; }

#agent-document-studio { padding-bottom: 85px; }
.agent-document-studio .agent-document-studio__close { height: 36px; align-self: flex-start; }
#agent-document-editor.ql-container {
  padding: 0;
  min-height: 370px;
  font-family: var(--agent-body-font);
  font-size: 17px;
}
#agent-document-editor .ql-editor {
  min-height: 370px;
  padding: 24px 28px 70px;
  font-family: var(--agent-body-font);
  line-height: 1.9;
  user-select: text;
  overflow-y: visible;
}
#agent-document-editor .ql-editor p { margin-bottom: .9em; }
#agent-document-editor .ql-editor h2 { margin: 1.2em 0 .6em; font-weight: 500; }
#agent-document-editor .ql-editor h3 { margin: 1em 0 .6em; font-weight: 500; }
#agent-document-editor .ql-editor blockquote { border-left: 2px solid #ada38d; padding-left: 1em; color: #615848; }
#agent-document-editor .ql-editor a { color: #6b4e26; }
.agent-document-source { margin-top: 12px; font-size: 12px; color: #736958; }
.agent-document-source summary { cursor: pointer; }
#agent-document-source { width: 100%; min-height: 210px; margin: 10px 0; padding: 10px; background: #fff8; color: #24221d; border: 1px solid #bdb4a3; font: 12px/1.7 Consolas, monospace; resize: vertical; }
.agent-document-studio .agent-document-studio__actions { grid-template-columns: 1fr 1fr; }
.agent-document-studio .agent-document-studio__actions button { font-size: 12px; }
.agent-document-studio button:disabled { opacity: .38; cursor: default; }

#agent-history-panel, #agent-site-settings {
  border-top: 1px solid #bdb4a3;
  margin-top: 24px;
  padding-top: 16px;
  font-size: 13px;
}
#agent-history-panel header, #agent-site-settings header { display: flex; justify-content: space-between; align-items: center; }
#agent-history-panel h3, #agent-site-settings h3 { font-family: "Butterfly WenKai", serif; font-size: 23px; font-weight: 400; margin: 0; }
#agent-history-panel p, #agent-site-settings p { color: #726b5e; line-height: 1.7; }
.history-checkpoint { display: flex; gap: 7px; }
.history-checkpoint input { flex: 1; min-width: 0; border: 1px solid #c3bba9; background: #fff9; border-radius: 4px; padding: 9px; color: #24221d; }
#agent-history-list { display: grid; gap: 7px; max-height: 360px; overflow: auto; }
.agent-history-entry { text-align: left; display: grid; gap: 4px; }
.agent-history-entry strong { font-size: 12px; }
.agent-history-entry small { color: #7b7264; font-size: 11px; }
#agent-history-preview { margin-top: 18px; padding: 14px; background: #fff8; border: 1px solid #cbc1ae; border-radius: 4px; }
#agent-history-diff p { margin: 5px 0; font-size: 12px; }
#agent-history-preview-copy { max-height: 280px; overflow: auto; font-family: var(--agent-body-font); line-height: 1.85; margin: 14px 0; }
#agent-history-preview-copy img { max-width: 100%; }
#agent-history-preview-copy table { border-collapse: collapse; width: 100%; }
#agent-history-preview-copy td { border: 1px solid #ddd; padding: 5px; }
#agent-site-settings label { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 15px 0; color: #51493c; }
#agent-site-settings label input { grid-column: 1 / -1; width: 100%; accent-color: #847354; }
#agent-site-settings input[type=text] { padding: 9px; border: 1px solid #bdb4a3; color: #24221d; background: #fff9; }
#agent-site-settings output { color: #8d7a55; font-variant-numeric: tabular-nums; }
#agent-site-settings input[type=color] { width: 55px; height: 32px; }
body.is-agent-visual-edit #agent-title-layer,
body.is-agent-visual-edit #agent-article-reader,
body.is-agent-visual-edit .interaction-hint,
body.is-agent-visual-edit .interaction-hint * { pointer-events: auto !important; cursor: text; }
body.is-agent-visual-edit #app :not(canvas):not(section):hover { outline: 1px dashed #e9d89a; outline-offset: 4px; }

/* Reading rhythm: clear hierarchy, short lines, justified CJK with ragged last lines. */
#agent-article-content {
  color: var(--agent-body-ink, #eeeae1);
  max-width: var(--agent-article-width, 760px);
  width: min(var(--agent-article-width, 760px), 100%);
  font-size: var(--agent-body-size, 21px);
  line-height: var(--agent-body-leading, 1.85);
  text-shadow: 0 2px 8px #000a;
  letter-spacing: .015em;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
.agent-article-content__body { max-width: none !important; }
#agent-article-content .agent-article-content__body p {
  text-align: justify;
  text-align-last: left;
  overflow-wrap: break-word;
  margin: 0 0 1.35em;
  orphans: 3;
  widows: 3;
}
#agent-article-content .agent-article-content__body h2 {
  font-size: 1.4em;
  margin: 2.2em 0 .65em;
  padding-bottom: .25em;
  border-bottom: 1px solid #e3d9be35;
}
#agent-article-content .agent-article-content__body h3 { font-size: 1.15em; margin: 1.8em 0 .65em; }
#agent-article-content .agent-article-content__body blockquote {
  background: #24211a80;
  border-left: 2px solid #d9c79e;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  border-radius: 0 5px 5px 0;
  font-size: 1em;
}
#agent-article-content blockquote p:last-child { margin-bottom: 0; }
#agent-article-content pre {
  color: #eee8d8;
  background: #14181ce8;
  border: 1px solid #b1a88a40;
  border-radius: 6px;
  padding: 20px;
  overflow-x: auto;
  line-height: 1.65;
  font: 14px/1.65 Consolas, "Courier New", monospace;
  white-space: pre;
  tab-size: 2;
}
#agent-article-content :not(pre) > code { font-size: .78em; background: #6a665455; padding: .12em .35em; border-radius: 3px; }
#agent-article-content img { margin: 1.6em auto; }
#agent-article-content table { display: block; max-width: 100%; overflow-x: auto; }
#agent-article-content li { margin: .3em 0; padding-left: .3em; }
#agent-article-content hr { border: 0; height: 1px; background: #c5bca64f; margin: 2em 0; }
#agent-article-content strong { color: #fff9e7; font-weight: 600; }
.agent-inline-edit-tools {
  position: fixed;
  z-index: 30;
  top: max(20px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(238, 234, 225, .7);
  font: 12px/1.5 "Butterfly WenKai", serif;
}
.agent-inline-edit-tools button {
  padding: 6px 12px;
  border: 1px solid rgba(238, 234, 225, .28);
  border-radius: 0;
  background: rgba(12, 13, 16, .36);
  color: #eeeae1;
  cursor: pointer;
  font: inherit;
}
#agent-inline-edit-status[data-state="error"] { color: #f3b8aa; }
body.is-agent-inline-edit .agent-article-reader { pointer-events: auto; }
body.is-agent-inline-edit .agent-article-reader__veil { pointer-events: none; }
body.is-agent-inline-edit [contenteditable="true"] {
  caret-color: #fff4d8;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  outline: none;
}
body.is-agent-inline-edit [contenteditable="true"]:focus {
  box-shadow: inset 2px 0 0 rgba(227, 215, 185, .35);
}
body.is-agent-inline-edit .agent-article-content__body { min-height: 200px; }
body.is-agent-inline-edit .interaction-hint { opacity: 0; pointer-events: none; }
.agent-article-content__english { margin-bottom: 42px; }
@media (max-width: 760px) {
  #agent-article-content { font-size: clamp(17px, 4.5vw, 20px); line-height: 1.85; }
  #agent-document-editor .ql-editor { padding: 20px 18px 55px; }
}